當使用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標籤閃爍

回答

相關問題