Geek Answers Handbook

Style images do not reload Firefox or Safari

We found that Firefox (at least v3) and Safari do not cache images specified in the css file. Images are cached, but they are never updated, even if you change them on the server. Once Firefox has an image in the cache, it never checks to see if it has changed.

Our css file looks like this:

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

The problem is that if we change the image of newsitem_background.jpg, all Firefox users will still get the old image, unless they explicitly refresh the page. IE, on the other hand, detects that the image has changed and reloaded it automatically.

Is this a known issue? Any workarounds? Thanks!

EDIT: decision not to press F5. I can do it. But our customers just go to our website and get the old outdated graphics. How do they know that they will need to press F5?

I installed Firebug and confirmed that I already suspected: Firefox just doesn’t even try to get the images referenced by the css file to see if they have changed. When you press F5, it checks all the images, and the web server responds perfectly to 304, except for those that have been changed, where it answers 200 OK.

So, is there a way to get Firefox to automatically update the image referenced by the css file? Am I not the only one with this problem?

EDIT2: I tested this with localhost and the image response does not contain any caching information, this is:

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: , , , Firefox , ( ).

+5
7

URL- . " " :

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

, , - . -look-124.css newsitem_background-7.jpg.

, .

+2

HTTP- , , (-) CSS.

- ( ), , ().

+1

SHIFT ( F5).

, Firebug, HTTP-/ , . . , 304 ( ).

0

, , , , , , Firefox , IE - ( ;)).

, . ( URL- ), , .

0

Firefox, , , , , :

css PHP script, :

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

script

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

, , Firefox, , . , .

0

Another operational work (if this happens mainly in web design) is to view the actual css page in firefox and reload the page, and then when you return to the site, the browser will read the current css page.

Of course, this is a temporary fix for the web designer only.

0
source

More articles:


All Articles