javascript - 在大多数移动浏览器上只有在出现重大延迟后图像才会更改

Question

我想知道为什么通过图像 src 标签或 css background-image 更改现有元素的图像只能在大多数移动浏览器上延迟很长时间后才能完成。 (Android Chrome、iOS Chrome、iOS Safari，...)

我基本上有一个图像标签或一个 div，我想立即更改图像:

// preload images
for(var i = 1; i < 21; i++){
  var img = new Image();
  img.src = "covers/" + i + ".jpg";
}

var cover = $("#cover");
$("#flow").on("touchstart", function(){
  p++;
  cover.src = "covers/" + p + ".jpg";
  // cover.style['background-image'] = "url('covers/" + p + ".jpg')";
});

这两种方法都适用于桌面浏览器和原生 Android 浏览器。我创建了一个 example here (您需要触摸才能更改图像标签的 src - 您可以在 Chrome 浏览器中通过在 Web 检查器中选择 Emulate touch events 来执行此操作)。在 iOS 6 和 7、Safari 和 Chrome 中，更改不会立即发生，而是有明显的延迟。 Android Chrome 也是如此。

图像都是预加载的(Safari Web Inspector Remote Debugging 也这么说)。当通过带有 display: none; 的图像标签预加载图像时，行为不会改变。

你能想象这是为什么吗？

Answer 1

对此的解决方案是注意服务器 Cache-Control header 。

我测试了从 Dropbox 提供页面以在不同设备上查看。 Dropbox 目前不允许其服务的资源被浏览器缓存。这意味着，一个好的浏览器必须在应用之前与服务器核对更新版本(在 RFC 2616 Spec 中定义)。

因此，所有具有 JS 预加载、图像标签预加载、css background-image 或图像标签 src 的版本在浏览器不被强制检查后都能完美工作。这可以通过让服务器响应 Cache-Control: public 的缓存控制 header 来完成。

感谢任何其他方法!