Le immagini dei fogli di stile non vengono ricaricate da Firefox o Safari

Question

Abbiamo scoperto che Firefox (almeno v3) e Safari non memorizzano correttamente nella cache le immagini a cui fa riferimento un file CSS. Le immagini vengono memorizzate nella cache, ma non vengono mai aggiornate, anche se le si modifica sul server. Una volta che Firefox ha l'immagine nella cache, non verificherà mai se è cambiata.

Il nostro file css è simile al seguente:

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

Il problema è che se ora cambiamo l'immagine newsitem_background.jpg, tutti gli utenti di Firefox otterranno comunque la vecchia immagine, a meno che non aggiornino esplicitamente la pagina. IE, d'altra parte, rileva che l'immagine è cambiata e la ricarica automaticamente.

È un problema noto? Qualche soluzione alternativa? Grazie!

EDIT: la soluzione non è premere F5. Posso farlo. Ma i nostri clienti visiteranno semplicemente il nostro sito Web e otterranno la vecchia grafica obsoleta. Come fanno a sapere che dovrebbero premere F5?

Ho installato Firebug e confermato ciò che già sospettavo: Firefox non prova nemmeno a recuperare immagini a cui fa riferimento un file CSS, per scoprire se sono state modificate. Quando si preme F5, controlla tutte le immagini e il server Web risponde bene con 304, ad eccezione di quelli che sono modificati, dove risponde con 200 OK.

Quindi, c'è un modo per sollecitare Firefox a automaticamente aggiornare un'immagine a cui fa riferimento un file CSS? Sicuramente non sono l'unico con questo problema?

EDIT2: l'ho testato con localhost e la risposta all'immagine non contiene alcuna informazione di memorizzazione nella cache, è:

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: ho fatto qualche altra lettura e sembra che non possa essere risolto, dal momento che Firefox, o la maggior parte dei browser, supporranno che un'immagine non cambi molto spesso (scade l'intestazione e tutto il resto).

Answer 1

Aggiungerei semplicemente un valore di querystring all'URL dell'immagine. Di solito creo solo un "numero di versione" e incrementalo ogni volta che l'immagine cambia:

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

Answer 2

Per evitare questo problema, ho visto i webmaster che aggiungevano numero di versione ai loro file. Quindi caricano site-look-124.css e newsitem_background-7.jpg.

Non è una cattiva soluzione, IMHO.

Answer 3

Verifica le intestazioni HTTP sulle immagini che stai offrendo, così come i file CSS.

Se uno di essi è impostato su cache (o mancante), scoprirai che il browser sta memorizzando correttamente nella cache i file.

Answer 4

So che probabilmente non è quello che vuoi sentire, ma è molto più probabile che Firefox stia seguendo lo standard e IE stia facendo qualcosa di leggermente strano (e ti capita di fare affidamento su di esso;)).

Il comportamento della memorizzazione nella cache dipende da quali intestazioni della cache vengono inviate con le immagini. Se sei in grado di pubblicare le intestazioni (o un URL su una delle immagini), allora saremo in grado di dirti più specificamente cosa sta succedendo.

Answer 5

Questo non risolverà il problema di Firefox che non controlla se l'immagine è scaduta, ma cosa puoi fare per assicurarti che i tuoi clienti vedano l'immagine corretta è:

Imposta l'immagine nel CSS su un PHP o uno script simile che restituisca l'immagine:

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

Quindi utilizza lo script per restituire l'immagine "

<?php
$name = isset(
 Questo non risolverà il problema di Firefox che non controlla se l'immagine è scaduta, ma cosa puoi fare per assicurarti che i tuoi clienti vedano l'immagine corretta è: 

 Imposta l'immagine nel CSS su un PHP o uno script simile che restituisca l'immagine: 

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


 Quindi utilizza lo script per restituire l'immagine " 

<*>

 Lo uso sul mio server di casa per restituire casualmente un'immagine di sfondo per alcune delle mie pagine e Firefox non sembra memorizzarle nella cache. Puoi anche fare un po 'di stupore con le immagini se vuoi. 
REQUEST['name']) ? 
 Questo non risolverà il problema di Firefox che non controlla se l'immagine è scaduta, ma cosa puoi fare per assicurarti che i tuoi clienti vedano l'immagine corretta è: 

 Imposta l'immagine nel CSS su un PHP o uno script simile che restituisca l'immagine: 

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


 Quindi utilizza lo script per restituire l'immagine " 

<*>

 Lo uso sul mio server di casa per restituire casualmente un'immagine di sfondo per alcune delle mie pagine e Firefox non sembra memorizzarle nella cache. Puoi anche fare un po 'di stupore con le immagini se vuoi. 
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);

Lo uso sul mio server di casa per restituire casualmente un'immagine di sfondo per alcune delle mie pagine e Firefox non sembra memorizzarle nella cache. Puoi anche fare un po 'di stupore con le immagini se vuoi.

Answer 6

Un'altra soluzione rapida (se ciò si verifica principalmente nel mezzo della progettazione Web) è visualizzare la pagina CSS effettiva in Firefox e ricaricare la pagina, quindi quando torni al sito Web il browser leggerà il CSS corrente pagina.

ovviamente questa è una correzione temporanea solo per il web designer

Answer 7

Prova a tenere premuto il tasto MAIUSC mentre fai clic su Ricarica (o premi F5 ).

Altrimenti, utilizzare uno strumento come Firebug per controllare le intestazioni di richiesta / risposta HTTP e osservare i valori di intestazione che controllano la memorizzazione nella cache. Non ho mai notato questo problema. Forse il tuo server sta restituendo una risposta 304 (non modificata).