5

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 浏览器。我在这里创建了一个示例（您需要点击更改图像标签的 src - 您可以在 Chrome 浏览器中通过Emulate touch events在 Web Inspector 中选择来更改）。在 iOS 6 和 7 中，Safari 和 Chrome 都不会立即发生更改，而是会出现明显延迟。Android Chrome 也一样。

所有图像都是预加载的（Safari Web Inspector Remote Debugging 也这么说）。当图像通过带有display: none;.

你能想象为什么吗？

4

1 回答 1

0

解决方案是注意服务器Cache-Control标头。

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

因此，只要不强制浏览器进行检查，所有带有 JS 预加载、图像标签预加载、css 背景图像或图像标签 src 的版本都能完美运行。这可以通过让服务器响应缓存控制标头来完成Cache-Control: public。

感谢您提供任何其他方法！

于 2013-10-06T14:23:49.737 回答