Les images de feuille de style ne sont pas rechargées par Firefox ou Safari

Question

Nous avons découvert que Firefox (au moins v3) et Safari ne mettent pas correctement en cache les images référencées à partir d'un fichier css. Les images sont mises en cache, mais elles ne sont jamais actualisées, même si vous les modifiez sur le serveur. Une fois que Firefox aura l'image dans le cache, il ne vérifiera jamais s'il a changé.

Notre fichier CSS ressemble à ceci:

div#news { 
    background: #FFFFFF url(images/newsitem_background.jpg) no-repeat; 
    ... 
} 

Le problème est que si l'on change maintenant l'image newsitem_background.jpg, tous les utilisateurs de Firefox toujours obtenir l'ancienne image, à moins qu'ils actualisent la page. IE, d'autre part, détecte que l'image a changé et le recharge automatiquement.

Est-ce un problème connu? Des solutions de contournement? Merci!

EDIT: La solution ne consiste pas à appuyer sur F5. Je peux le faire. Mais nos clients vont simplement visiter notre site web, et obtenir les anciens graphiques obsolètes. Comment sauraient-ils qu'ils devraient appuyer sur F5?

J'ai installé Firebug et confirmé ce que je soupçonnais déjà: Firefox n'essaie même pas de récupérer des images référencées à partir d'un fichier css, pour savoir si elles ont été modifiées. Lorsque vous appuyez sur F5, il vérifie toutes les images, et le serveur Web répond gentiment avec 304, à l'exception de ceux qui ont changé, où il répond avec 200 OK.

Donc, y a-t-il un moyen d'inciter Firefox à automatiquement mettre à jour une image qui est référencée à partir d'un fichier css? Sûrement je ne suis pas le seul avec ce problème?

EDIT2: J'ai testé cela avec localhost et la réponse d'image ne contient pas d'informations de mise en cache, il est:

Server Microsoft-IIS/5.1 
X-Powered-By ASP.NET 
Date Tue, 14 Oct 2008 11:01:27 GMT 
Content-Type image/jpeg 
Accept-Ranges bytes 
Last-Modified Tue, 14 Oct 2008 11:00:43 GMT 
Etag "7ab3aa1aec2dc91:9f4" 
Content-Length 61196 

EDIT3: Je l'ai fait un peu plus la lecture et on dirait qu'il ne peut tout simplement » t être corrigé, car Firefox, ou la plupart des navigateurs, supposent qu'une image ne change pas très souvent (expire en-tête et tout).

Answer 1

Je voudrais simplement ajouter une valeur de chaîne de requête à l'URL de l'image. D'habitude, je viens de créer un « numéro de version » et l'incrément chaque fois que l'image change:

div#news { 
    background: url(images/newsitem_background.jpg?v=00001) no-repeat; 
    ... 
} 

Answer 2

Essayez de maintenir la touche MAJ enfoncée pendant que vous cliquez sur recharger (ou appuyez sur F5).

Sinon, utilisez un outil tel que Firebug pour vérifier les en-têtes de requête/réponse HTTP et observer les valeurs d'en-tête qui contrôlent la mise en cache. Je n'ai jamais remarqué ce problème. Votre serveur renvoie peut-être une réponse 304 (non modifiée).

Answer 3

Je sais que ce n'est probablement pas ce que vous voulez entendre, mais il est beaucoup plus probable que Firefox suive la norme et que IE fasse quelque chose d'un peu étrange (et que vous vous en souviendrez;)).

Le comportement de mise en cache dépend de l'envoi des en-têtes de mise en cache avec vos images. Si vous êtes en mesure de publier les en-têtes (ou une URL sur l'une des images), nous serons en mesure de vous expliquer plus précisément ce qui se passe.

Answer 4

Vérifiez vos en-têtes HTTP sur les images que vous diffusez, ainsi que le (s) fichier (s) CSS.

Si l'un d'entre eux est mis en mémoire cache (ou est manquant), vous constaterez que le navigateur cache correctement le (s) fichier (s).

Answer 5

Pour éviter ce problème, j'ai vu des webmasters ajouter le numéro de version à leurs fichiers. Donc, ils chargent site-look-124.css et newsitem_background-7.jpg.

Pas une mauvaise solution, à mon humble avis.

Answer 6

Cela ne résoudra pas le problème de Firefox ne vérifie pas si l'image a expiré, mais ce que vous pouvez faire pour vous assurer que vos clients voient l'image correcte est:

Définissez l'image css à un PHP ou d'un script qui retourne l'similaire d'image:

div#news { 
    background: #FFFFFF url(images/background.php?name=newsitem) no-repeat; 
    ... 
} 

Ensuite, utilisez le script pour retourner l'image »

<?php 
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : false; 
switch($name) { 
    case 'newsitem': 
     $filename = 'news_item_background.jpg'; 
    break; 
    default: 
     $filename = 'common_background.jpg'; 
    break; 
} 

header("Content-Type: image/jpeg"); 
header("Content-Transfer-Encoding: binary"); 
$fp = fopen($filename , "r"); 
if ($fp) fpassthru($fp); 

Je l'utilise sur mon serveur à domicile pour revenir au hasard un imag de fond e pour certaines de mes pages, et Firefox ne semble pas les mettre en cache. Vous pouvez également faire un peu funky avec les images si vous le souhaitez.

Answer 7

Un autre travail autour rapide (si cela se produit principalement au milieu de la conception web) est d'afficher la page css réelle dans Firefox, et rechargez la page, puis lorsque vous revenez sur le site Web, le navigateur lira la page css actuelle.

Bien sûr, cela est une solution temporaire juste pour le web designer