Stylesheet-Bilder werden nicht von Firefox oder Safari neu geladen

Question

Wir haben herausgefunden, dass Firefox (mindestens v3) und Safari Bilder, die von einer CSS-Datei referenziert werden, nicht richtig cachen. Die Bilder werden zwischengespeichert, aber sie werden nie aktualisiert, auch wenn Sie sie auf dem Server ändern. Sobald Firefox das Bild im Cache hat, überprüft es nie, ob es sich geändert hat.

Unsere CSS-Datei sieht wie folgt aus:

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

Das Problem, das ist, wenn wir jetzt die newsitem_background.jpg Bild ändern, werden alle Firefox-Nutzer immer noch das alte Bild erhalten, sofern sie nicht ausdrücklich die Seite aktualisieren. IE hingegen erkennt, dass sich das Bild geändert hat und lädt es automatisch neu.

Ist dies ein bekanntes Problem? Irgendwelche Problemumgehungen? Vielen Dank!

EDIT: Die Lösung ist nicht F5 drücken. Ich kann dies tun. Aber unsere Kunden werden nur unsere Website besuchen und die alten, veralteten Grafiken bekommen. Wie würden sie wissen, dass sie F5 drücken müssen?

Ich habe Firebug installiert und bestätigt, was ich bereits vermutet habe: Firefox versucht nicht einmal Bilder aus einer CSS-Datei abzurufen, um herauszufinden, ob sie geändert wurden. Wenn Sie F5 drücken, überprüft es alle Bilder, und der Webserver antwortet nett mit 304, außer denen, die geändert haben, wo es mit 200 OK antwortet.

Also gibt es eine Möglichkeit, Firefox auf automatisch zu zwingen, ein Bild zu aktualisieren, das aus einer CSS-Datei referenziert wird? Sicher bin ich nicht der Einzige mit diesem Problem?

EDIT2: ich dies mit localhost getestet, und die Bild Antwort enthält keine Cache-Informationen, es ist:

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: Ich habe etwas mehr Lesung getan, und es sieht aus wie es nur kann‘ t fix sein, da Firefox, oder die meisten Browser, einfach davon ausgehen, ein Bild ändert sich nicht sehr oft (abläuft Header und alle).

Answer 1

Ich würde nur einen Querystring-Wert zur Bild-URL hinzufügen. Ich schaffe in der Regel nur eine „Versionsnummer“ und es ändert jedesmal, wenn das Bild erhöhen:

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

Answer 2

Versuchen Sie, die Umschalttaste gedrückt zu halten, während Sie auf Neu laden klicken (oder drücken Sie F5).

Verwenden Sie andernfalls ein Tool wie Firebug, um die HTTP-Anforderungs-/Antwortheader zu überprüfen und die Headerwerte zu überwachen, die Caching steuern. Ich habe dieses Problem nie bemerkt. Möglicherweise gibt Ihr Server eine Antwort 304 (nicht geändert) zurück.

Answer 3

Ich weiß, dass dies wahrscheinlich nicht das ist, was Sie hören möchten, aber es ist wesentlich wahrscheinlicher, dass Firefox dem Standard folgt und IE etwas etwas merkwürdiges tut (und Sie verlassen sich einfach darauf;)).

Das Caching-Verhalten hängt davon ab, welche Caching-Header mit Ihren Bildern gesendet werden. Wenn Sie in der Lage sind, die Kopfzeilen (oder eine URL zu einem der Bilder) zu veröffentlichen, können wir Ihnen genauer sagen, was gerade passiert.

Answer 4

Überprüfen Sie Ihre HTTP-Header in den Bildern, die Sie bedienen, sowie die CSS-Datei (en).

Wenn einige davon im Cache gespeichert sind (oder fehlen), werden Sie feststellen, dass der Browser die Datei (en) korrekt zwischenspeichert.

Answer 5

Um solche Probleme zu vermeiden, habe ich Webmaster gesehen, die ihren Dateien Versionsnummern hinzufügten. So laden sie site-look-124.css und newsitem_background-7.jpg.

Keine schlechte Lösung, IMHO.

Answer 6

Das wird das Problem von Firefox nicht überprüft, ob das Bild nicht abgelaufen ist fix, aber was Sie tun können, um sicherzustellen, dass Ihre Kunden das richtige Bild zu sehen ist:

das Bild in der CSS an ein PHP-Set oder ein ähnliches Skript, das das Bild zurückgibt:

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

dann das Skript verwenden, um das Bild zurückzukehren“

<?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); 

ich es auf meinem Home-Server verwenden, um zufällig einen Hintergrund imag zurückkehren e für einige meiner Seiten, und Firefox scheint diese nicht zu cachen. Sie können auch einige funky Stup mit den Bildern tun, wenn Sie möchten.

Answer 7

Eine andere schnelle Behelfslösung (falls dies vor allem in der Mitte des Web-Design auftritt) ist die eigentliche CSS-Seite zu sehen in Firefox, und laden Sie die Seite neu, dann, wenn Sie zur Website zurückkehren, liest der Browser die aktuelle css-Seite.

das ist natürlich eine temporäre Korrektur nur für den Web-Designer