Stylesheet-Bilder werden nicht von Firefox oder Safari neu geladen

Question

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

Unsere CSS-Datei sieht wie folgt aus:

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

Das Problem ist, dass, 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 auf der anderen Seite erkennt, dass das Bild geändert hat und lädt es automatisch.

Ist das ein bekanntes Problem? Alle mögliche Abhilfen? Dank!

EDIT: Die Lösung ist nicht F5 zu drücken. Ich kann dies tun. Aber unsere Kunden werden nur unsere Website besuchen und erhalten Sie die alte, veraltete Grafik. Wie würden sie wissen, dass sie müssten F5 drücken?

Ich habe Firebug installiert und bestätigt, was ich schon vermutet: Firefox funktioniert einfach nicht einmal versuchen, Bilder aus einer CSS-Datei referenziert abzurufen, um herauszufinden, ob sie geändert wurden. Wenn Sie F5 drücken, tut es alle Bilder überprüfen, und der Web-Server reagiert gut mit 304, mit Ausnahme derjenigen, die wurde geändert, wo es antwortet mit 200 OK.

So ist es eine Möglichkeit, Firefox automatisch aktualisieren, ein Bild zu drängen, die von einer CSS-Datei referenziert wird? Sicher bin ich nicht der einzige mit diesem Problem?

EDIT2: Getestet habe ich diese mit localhost, 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 kann einfach nicht behoben werden, da Firefox, oder die meisten Browser, wird nur ein Bild davon ausgehen, nicht sehr oft ändern (gültig bis Header und alle) <. / p>

Answer 1

Ich würde nur einen Abfragezeichenfolgeflag Wert auf die Bild-URL hinzufügen. Ich in der Regel nur eine „Versionsnummer“ erstellen und erhöhe es jedesmal, wenn das Bild ändert:

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

Answer 2

solches Problem zu vermeiden, habe ich Webmaster gesehen Hinzufügen Versionsnummer , um ihre Dateien. So laden sie site-look-124.css und newsitem_background-7.jpg.

Keine schlechte Lösung, IMHO.

Answer 3

Überprüfen Sie Ihre HTTP-Header auf die Bilder, die Sie serviert, sowie die CSS-Datei (en).

Wenn einer von ihnen wird in dem Cache gesetzt (oder fehlt), werden Sie feststellen, der Browser die Datei korrekt ist das Caching (s).

Answer 4

Ich weiß, das ist wahrscheinlich nicht das, was Sie hören wollen, aber es ist wesentlich wahrscheinlicher, dass Firefox den Standard folgt und IE tut etwas etwas seltsam (und Sie nur auf es passieren, verlassen;)).

Das Caching-Verhalten hängt davon ab, welche Caching-Header mit Ihren Bildern gesendet werden. Wenn Sie in der Lage, die Header (oder eine URL zu einem der Bilder) zu schreiben, dann werden wir in der Lage sein, Ihnen zu sagen, genauer gesagt, was los ist.

Answer 5

Dies wird nicht das Problem beheben Firefox nicht überprüft, ob das Bild abgelaufen ist, aber was kann man tun, um sicherzustellen, dass Ihre Kunden das richtige Bild zu sehen ist:

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

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

Verwenden Sie dann das Skript das Bild zurück "

<?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 benutze es auf meinem Home-Server zufällig für einige meiner Seiten ein Hintergrundbild zurückzukehren, und Firefox scheint nicht diese zwischenzuspeichern. Sie können auch etwas flippigen stuph mit den Bildern tun, wenn Sie möchten.

Answer 6

Ein anderer schnelle Behelfslösung (falls dies vor allem in der Mitte des Web-Designs auftritt) ist die eigentliche CSS-Seite in Firefox anzuzeigen, und laden Sie die Seite, dann, wenn Sie auf die Website zurückkehren liest der Browser die aktuellen CSS Seite.

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

Answer 7

Versuchen Sie die SHIFT-Taste gedrückt halten, während Sie reload klicken (oder drücken Sie F5 ).

Ansonsten ein Tool wie Firebug verwenden, um die HTTP-Request / Response-Header zu überprüfen und die Header-Werte beobachten, die Caching Kontrolle zu bringen. Ich habe bemerkt, nie dieses Problem. Vielleicht ist Ihr Server eine 304-Antwort zurückgibt (nicht modifiziert).