通过javascript设置的背景图像未被Chrome缓存

在我的网站上，当页面加载时，一些javascript检测到屏幕分辨率，然后使用以下代码将主体背景设置为url：通过javascript设置的背景图像未被Chrome缓存

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文件，那么它将按预期工作中铬，但如果我把它放在JavaScript，然后它似乎让Chrome刷新图像。

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

来源

2012-09-03 Click Upvote

中找到“在Firefox中，这一切都按预期工作” - 你为什么想到浏览器将不会再次请求它？从您的角度来看，您使用3的哪个标题应该防止浏览器重新请求它？ – zerkms

不知道这是否会有所作为，但是如何在body标签中添加一个类并在样式表中定义图像？我假设你只有六张左右的图像？ –

而且，就像昨天一样 - 作为一名高级代表用户，你懒得谷歌，并发现使用“PHP图像缓存”搜索查询，你会得到数百个工作的解决方案（假设你太懒惰了阅读http规范） – zerkms

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

，如果它存在 - 你需要与304

来源

2012-09-03 23:20:20 zerkms

我只想使用该文件中给出的3个头文件，即'header（“Cache-Control：private，max-age = 10800，pre-check = 10800”）; header（“Pragma：private”）; header（“Expires：”。日期（DATE_RFC822，strtotime（“2 day”）））;'它工作 –

@Click Upvote：这不是一个可靠的解决方案。你需要用'304'来回应，正如它在那篇文章中所说的那样。至少这是应该如何以正确的方式完成的（这就是所有web服务器的实现方式） – zerkms

通过javascript设置的背景图像未被Chrome缓存

回答

相关问题