jQuery Imageプリローダー機能は機能しますか？

Question

すべての小さな画像に$（window）.load（）がロードされた後にリンクによって参照されるライトボックスギャラリーから大きな画像を読み込む関数を作成しました。

ここでは、コードです：

$(window).load(function() { 
    if ($('ul#gallery').length > 0) { 
     // make a container, fill in images and attach it to the page body 
     var c = $("<div />").attr({style: 'display: none', id: 'gallerypreload'}); 
     $("ul#gallery li > a").each(function() { 
      $('<img />').attr('src', $(this).attr('href')).appendTo(c); 
     }); 
     c.appendTo('body'); 
    } 
}); 

ギャラリーは以下のようになります。

<ul id="gallery"> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
</ul> 

ブラウザが最初にすべてのサムネイルをロードし、THENのための大きな画像をプリロードすることになっているので、私は、これをしたいが、見る。また、私は$（window）.load（）でもトリガされる何らかのフェード効果を書いています。

私の質問はここにあります：すべてのブラウザは、本体に取り付けられた画像をコンテナに入れていますか？したがって、それは表示されません、理論的に彼らはイメージを読み込んではいけませんか？私はのスタイルをしなければならないのでしょうか？

ありがとうございました。

Answer 1

あなたは

$("ul#gallery li > a").each(function() { 
    var preload = new Image(); 
    preload.src = $(this).attr('href'); 
    $('<img />').attr('src', preload.src).appendTo(c); 
}); 

その後

IMGタグが表示されている場合、それは問題ではないはずかない

---

ベースをプリロードしたいSRCとjavascriptの画像オブジェクトを作成することにより、予圧を強制することができます以下のコメントでは、これは画像をプリロードするのに十分でなければなりません：

$("ul#gallery li > a").each(function() { 
    var preload = new Image(); 
    preload.src = $(this).attr('href'); 
}); 

またはさらに

$("ul#gallery li > a").each(function() { 
    (new Image()).src = $(this).attr('href'); 
});