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

Question

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

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

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

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

在url 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中。 即使通过javascript加载了chrome，有没有办法强制chrome缓存图像？

Answer 1

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

如果存在-您需要回覆304

有关更多详细信息，请参见http://dtbaker.com.au/random-bits/how-to-cache-images-generation-by-php.html