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 Inspector中的Emulate touch events来执行此操作。在iOS 6和7中，Safari和Chrome都不会立即发生变化，但会有很大的延迟。适用于Android Chrome。

所有图像都预先加载（Safari Web Inspector Remote Debugging也这样说）。通过带display: none;的图像标记预加载图像时，行为不会改变。

你能想象为什么吗？

Answer 1

解决此问题的方法是注意服务器Cache-Control标头。

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

因此，一旦浏览器不被强制检查，所有具有JS预加载，图像标记预加载，css背景图像或图像标记src的版本都能正常工作。这可以通过让服务器使用Cache-Control: public的缓存控制头进行响应来完成。

感谢您采取任何其他方法！

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

1 个答案: