使用 JavaScript 重新渲染时阻止 img 标签闪烁答案

【问题标题】：Stop img tags from flickering when re-rendering with JavaScript使用 JavaScript 重新渲染时阻止 img 标签闪烁
【发布时间】：2014-01-03 11:27:55
【问题描述】：

我们的网络应用完全用 JS 构建。
为了让它更快捷，我们在页面视图之间缓存资源（模型），并在您查看页面时重新加载资源。

我们的流程是这样的：

用户在 ViewA 中
用户切换到 ViewB
我们使用缓存的资源来渲染 ViewB
我们开始获取资源
获取资源后，我们再次渲染

这有一个令人讨厌的缺点，即导致<img> 标记闪烁，即使它们相同。
问题是我们使用的Backbone.js 并没有告诉我们在获取集合时是否有任何变化，只是告诉我们它被获取了。

这是我的意思的快速演示：http://jsfiddle.net/p7DdG/
它只发生在 webkit 和 <img> 标签中，而不是你可以看到的背景图像。

我们认为使用background-image 而不是正确的img 标签有点丑。

有什么解决办法吗？

【问题讨论】：

每个$('img').replaceWith都是你自己做的吗？
在 Chrome 中看不到任何闪烁。
所有父容器都由我删除和创建。我正在使用 Chrome 18.0.1025.39 测试版
这似乎是一个 Chrome（osx - 未测试的 Windows）错误 - 除了背景图像之外找不到任何其他解决方案，所以现在它是我害怕的唯一修复 - 丑陋与否至少它有效:)
他们现在已经修好了，问题解决了:)

标签： html css webkit web

【解决方案1】：

问题在 Chrome 19 中消失了，问题解决了 :)

【讨论】：

【解决方案2】：

不知道每张图片的 URL 是如何构建的，我不确定这是否可行，但是您能否在替换之前检查每个图片标签的 src 属性与您要替换它的那个属性？例如

 var newImageSrc = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
 if (newImageSrc != $("img").attr("src")) {
    $('img').replaceWith('<img src="'+newImageSrc +'">');
 }

或者 - 将图像加载到屏幕外，并将事件处理程序附加到图像的 onload 事件，这会将图像移动到当前图像的父标记，并删除旧的。例如

var oldImage = $("#oldImageId");
var newImageSrc = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
var newImage = new Image();
$(newImage).load(function (event) {
    $(oldImage).parent().append(newImage);
    $(oldImage).detach();
});
$(newImage).attr("src", newImageSrc);

【讨论】：

这不起作用，因为我要替换包含所有图像的根元素。由于图像的顺序可能已更改或图像可能已添加/删除，因此我无法在需要时简单地迭代和替换。
我能想到的唯一其他选择是将图像加载到屏幕外的新标签中，然后将其移动到另一个图像的父级中。我会放一些示例代码...
如果你提供你正在使用的实际代码，也许我们可以看看并想出一些没有这个来回的东西;)

【解决方案3】：

我遇到了同样的问题，并注意到有时图像会闪烁，有时则不会。即使在最新的 Chrome（目前为 v33）中。

对于后代，闪烁发生在未缓存的图像中。

就我而言，Cache-Control: public, max-age=31536000 完全消除了它。

【讨论】：