jQueryを使用して画像をプリロードする方法

Question

こんにちは私はページの1つにギャラリーがあるプロジェクトを持っています。そのような何か：

<div id="gallery" class="sections"> 
     <img src="Images/Image1.jpg" class="thumbnails"> 
     <img src="Images/Image2.jpg" class="thumbnails"> 
     <img src="Images/Image3.jpg" class="thumbnails"> 
     etc... 
</div> 

私はあなたがギャラリーページにアクセスしたとき、彼らはすでにロードされているように、これらの画像をプリロードしたいと思います。私はあなたがjavascriptを使ってこれを行うことができることを知っています。

var myImage = new Image(); 
myImage1.src = "Images/Image1.jpg"; 
etc... 

私が確信していることは次のステップです。私は、HTMLからSRCを削除し、IDを追加し、とても好きです：

<div id="gallery" class="sections"> 
     <img id="image1" class="thumbnails"> 
     <img id="image2" class="thumbnails"> 
     <img id="image3" class="thumbnails"> 
     etc... 
</div> 

をし、そのような何か：

$('#image1').append(myImage1); 

これは働いていません...私も試してみました：

$('#image1').attr('src','Images/Image1.jpg'); 

そして、それもうまくいきません。

私は周りを見ていて、あなたの画像などをプリロードする関数を作る方法について多くのチュートリアルがありますが、私はまだかなりありません。私はちょうど今それを1つ1つの基本でそれを行う方法を知りたいし、おそらく関数を作成したいと思います。ありがとう。

Answer 1

これは多くの機能を果たしています ページが開いていても可視ではなく、画像がDOMに読み込まれます。次に、それらを表示したいとき（クリック時、スライダ上、...）、ロード時間がない！

[jQueryを使ってプリロード画像]の

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
    }); 
} 

//すべての画像のパスを指定して、関数を使用し

preload([ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]);