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

Posted 2023-03-06

【中文标题】仅在大多数移动浏览器出现重大延迟后才会更改图像

【英文标题】：Image changes only after a major delay on most mobile browsers

【发布时间】：2013-10-12 14:45:41

【问题描述】：

我想知道为什么在大多数移动浏览器上通过图像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; 的图像标签预加载时，行为不会改变。

你能想象为什么吗？

【问题讨论】：

大多数浏览器不会在 display: none; 区域的 标记中加载图像。您是否尝试将它们加载到屏幕外 1px x 1px 的小区域中，例如：position: absolute; left: -100px; top: -100px; display: block; overflow: hidden; width: 1px; height: 1px;？

我的猜测是您预加载的图像数据已从内存中删除，因为Image 对象几乎立即被垃圾收集。这在桌面上不是问题，因为可用内存量更大。尝试将Images 保存在内存中的数组中。

【参考方案1】：

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

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

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

感谢任何其他方法！