JQuery append（）で画像を追加する際の画像の再読み込みを防止する

Question

画像URLを含むJSONを返すAJAX呼び出しがあります。私は彼らのためにDOMに画像を追加したいと思いますが、同じ画像を何度も何度も繰り返していくつもりです。私は帯域幅のコストを上げたくありません。ブラウザはデフォルトでこれらの画像をキャッシュしません.JQueryでimg要素を作成して追加すると、ブラウザはそのたびにその画像を要求します。

は、だから私はそうのような隠されたdiv要素の形でキャッシュを追加しました：

<div id="imageCache" style="display: none;"></div> 

およびそれらにimageKeyがある可能性があります、サーバーから返されるオブジェクトJSONをループするときにはJQueryでこれをやった：

if (post.imageKey) { 
    var cachedImage = $("#imageCache ." + post.imageKey); 

    if (cachedImage.length) { 
     var newImage = $(cachedImage).clone(); 
     $("#" + post.key).append(newImage); 
    } 
    else {     
     var newImage = $("<img src='/image?key=" + post.imageKey + "' alt='" + post.title + "' class='offeredPost " + post.imageKey + "'/>"); 
     $("#" + post.key).append(newImage); 

     cachedImage = $(newImage).clone(); 
     $("#imageCache").append(cachedImage); 
    } 
} 

しかし、喜びはありません。クローンされたイメージはDOMに追加されますが、JSがページを完了するとすぐにブラウザ（Chrome）がイメージの新しいリクエストを行います。

アイデア？ありがとう。

Answer 1

divの幅と高さを画像の幅と高さに設定し、backgroundプロパティを使用して画像url（ 'myImage.jpg'）を読み込みます。 divがピクチャよりも大きい場合はno-repeatを使用してください。