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

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浏览器.我在这里创建了一个示例(您需要触摸以更改图像标记的src - 您可以通过Emulate touch events在Web Inspector中选择来在Chrome浏览器中执行此操作).在iOS 6和7中,Safari和Chrome都不会立即发生变化,但会有很大的延迟.适用于Android Chrome.

所有图像都预先加载(Safari Web Inspector Remote Debugging也这样说).当图像通过image标签预加载时,行为不会改变display: none;.

你能想象为什么吗？

Answer 1

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

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

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

感谢您提供其他方法！