javascript - 延迟加载背景图像时防止双重请求

Question

我正在尝试使用 Javascript 延迟加载背景图像，并在下载完成时使用回调。我正在使用此代码

var img = new Image();

img.onload = function() {

    element.style.backgroundImage = 'url(' + this.src + ')';
    // Need to do other things here
}

img.src = 'path_to_image.jpg';

它在 Chrome、Firefox 和 IE 9+ 上运行良好，但在使用 Safari(OSX 和 iOS)或 Android 浏览器时，它会向服务器发出两个请求。看来这两个浏览器不使用缓存。知道如何在不下载每个图像两次的情况下做到这一点吗？

如果有帮助，我不需要它与 IE 10 及更早版本兼容

Answer 1

我通过在传输图像文件时设置缓存控制 header 解决了这个问题。显然，如果您没有另外指定，Safari 会认为图像立即过期，因此它们在预加载和首次使用之间过期。

您可能想要使用 Web 服务器指令来更改这些 header ，正如我在其中找到问题的一般解决方案 ( jQuery Pre-load Not Caching in Chrome or Safari ) 中所建议的那样。在 Apache 上启用一日缓存应如下所示:

<FilesMatch "\.(gif|jpeg|jpg|png|svg)$">
    Header set Cache-Control "public, max-age=86400"
</FilesMatch>

这实际上对我快速验证它不起作用，但 the example in the Apache 2.4 docs 也不起作用。所以我可能还有其他事情要做。

就我而言，我碰巧在 Controller 中生成原始图像，因此我最终使用应用程序框架 (CakePHP 3) 的功能设置 header ，然后再返回它们:

$this->response->cache('-10 seconds', '+40 seconds');

这会导致 Cake 在响应中添加三个 header :

Last-Modified:   Fri, 24 Jun 2016 10:20:14 GMT
Expires:         Fri, 24 Jun 2016 10:21:04 GMT
Cache-Control:   public, max-age=40

这让我担心客户端和服务器之间的时钟差异，但根据 the HTTP/1.1 spec :

If a response includes both an Expires header and a max-age directive, the max-age directive overrides the Expires header, even if the Expires header is more restrictive.