JavaScriptで再レンダリングするときにimgタグがちらつくのを防ぐ

Question

私たちのWebアプリケーションは完全にJSで構築されています。
ページビュー間でリソース（モデル）をキャッシュし、ページを表示するときにリソースをリロードします。

私たちの流れは、このようなものです：

1. ユーザーがViewA
2. に私たちは、資源のためにフェッチを開始ViewB
へのユーザー切り替え
3. 我々はViewB
4. をレンダリングするために、キャッシュされたリソースを使用している
5. リソースが取得されると、再びレンダリングされます

これは、<img>タグを、それらが同じであればいつでも点滅させるという厄介な欠点を持っています。
問題は、私たちが使用するBackbone.jsは、コレクションを取得するときに変更されたものがあれば、それがフェッチされたということだけを教えてくれません。あなたが見ることができるようにそれが唯一のWebKitにし、<img>タグと、ない背景画像で発生http://jsfiddle.net/p7DdG/
：

は、ここで私が何を意味するかの簡単なデモです。

適切なimgタグの代わりにbackground-imageを使用することはちょっと醜いと思います。

これに解決策はありますか？

Answer 1

問題はクローム19でなくなって、問題は、私は同じ問題に遭遇し、時には画像がちらつきを行い、時にはないことに気づい

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

Answer 3

:)を解決しました。最新のChromeでも（v33現在）。

後で説明すると、は、キャッシュされていない画像で点滅します。

私の場合、Cache-Control: public, max-age=31536000はそれを完全に排除しました。