当使用JavaScript重新渲染时，阻止img标签闪烁

我们的Web应用程序完全由JS构建。
为了让它更快速，我们在浏览页面之间缓存资源（模型），并在查看页面时重新加载资源。当使用JavaScript重新渲染时，阻止img标签闪烁

我们的流程是这样的：

用户在ViewA
用户切换到ViewB
我们使用缓存的资源来呈现ViewB
我们开始获取资源
当资源被提取时，我们再次渲染

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

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

我们认为使用background-image代替适当的img标签有点丑。

有没有解决这个问题的方法？

来源

2012-02-28 Nicklas A.

你正在做每个'$（'img'）。replaceWith'自己吗？ – 2012-02-28 16:23:26

在Chrome中没有看到任何闪烁。 – j08691 2012-02-28 16:47:46

所有的父容器都被删除并由我创建。我使用Chrome 18.0.1025.39测试 – 2012-02-29 07:47:04

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

来源

2012-05-09 16:28:44

不知道每个图像的URL是如何构建的我不确定这会起作用，但是可以在进行替换之前检查每个图像标记的src属性与您替换的图像标记的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);

来源

2012-02-28 16:25:59

这不会工作，因为我正在替换包含所有图像的根元素。由于图像的顺序可能已经改变或图像可能已被添加/删除，因此我不能简单地迭代并在需要时进行替换。 – 2012-02-29 07:48:23

我能想到的那么唯一的另一种选择是将图像加载到一个新的标签关闭屏幕，然后将其移动到其他图像的父母。我会放一些示例代码... – 2012-02-29 12:18:07

这是不行的，因为我批量删除/渲染。 – 2012-02-29 13:12:38

我遇到了同样的问题，并注意到，有时做图像闪烁，有时没有。即使在最新的Chrome（截至目前的v33）。

对于后人，闪烁情况与未缓存图像。

在我的情况下，Cache-Control: public, max-age=31536000完全消除它。

来源

2014-01-03 03:27:55 kangax

当使用JavaScript重新渲染时，阻止img标签闪烁

回答

相关问题