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