Question

我们的网络应用程序完全由JS构建为了使它变得活泼，我们在页面视图之间缓存资源（模型），并在您查看页面时重新加载资源。

我们的流程是这样的：

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

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

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

我们认为使用background-image代替正确的img代码有点难看。

有没有解决方案？

Answer 1

问题在Chrome 19中消失了，问题解决了：）

Answer 2

不确切知道每个图像的URL是如何构建的我不确定这是否可行，但是在进行替换之前，您是否可以检查每个图像标记的src属性与替换它的那个？ e.g。

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

或者 - 将图像加载到屏幕外，并将事件处理程序附加到图像的onload事件，该事件将图像移动到当前图像的父标记，然后删除旧标记。 e.g。

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);

Answer 3

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

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

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

使用JavaScript重新渲染时，停止img标记闪烁

3 个答案: