Question

在我的网站上，当页面加载时，一些javascript检测到屏幕分辨率，然后使用以下代码将正文的背景设置为网址：

var url = "http://site.com/get_background/" + width + "/" + height;

var body=document.getElementsByTagName('body')[0];            

body.style.background = "#000000 url(" + url + ") fixed top center";

在网址get_background/，使用以下PHP代码提供图片：

     $etag = md5_file($image);
     $lastModified = gmdate('D, d M Y H:i:s', filemtime($image)) . ' GMT';

     header("Content-type: $mime");
     header("ETag: \"{$etag}\"");
     header("Last-Modified: $lastModified");
     header('Cache-Control: max-age=28800');

     $image = readfile($image);
     imagejpeg($image);

    imagejpeg($image);

在Firefox中，这一切都按预期工作。但是在Chrome中，每次加载此网站上的网页时，图片似乎都会再次加载，而不仅仅是缓存和提供。

如果我将用于设置背景的代码移动到外部css文件，那么它在chrome中按预期工作，但是如果我将其放在javascript中，那么它似乎会让Chrome刷新图像。

我该怎么办？由于需要通过javascript检测屏幕分辨率，因此代码必须放在JS中。有没有办法强制chrome缓存图像，即使它是通过javascript加载的？

Answer 1

要成功缓存响应，您需要在初始响应和下一个响应中设置Expires标头，您需要检查HTTP_IF_MODIFIED_SINCE请求标头是否存在。

如果存在 - 您需要回复304

可在http://dtbaker.com.au/random-bits/how-to-cache-images-generated-by-php.html

找到更多详情

通过javascript设置的背景图片不会被Chrome缓存

1 个答案: