javascript - Javascript での画像のプリロード

Question

シンプルなフォト ギャラリー ビューアを作成しました。バックグラウンドで画像をプリロードし、完了したら関数を実行したいと考えています。

私の質問は、どうすればいいですか？

Answer 1

var image = new Image();
image.src = "http://foo.com/myimage.jpg";

//if you have a div on the page that's waiting for this image...
var div = getElementById("imageWrapperDiv");

//you can set it on the image object as the item to draw into...
image.myDiv = div;

image.onload = function(){
  //do whatever you're going to do to display the image

  //so in this example, because I have set this objects myDiv property to a div on the page
 // I can then just populate that div with an img tag.
 //it's not the most elegant solution, but you get the idea and can improve upon it easily
  this.myDiv.innerHTML = "<img src='" +  this.src  +"'>";
}

画像が読み込まれると、ブラウザのキャッシュに保存されるため、src プロパティを使用すると、ページのどこにでも画像を描画でき、すぐに表示されます。

Answer 2

私は、典型的な Javascript 関数と比較して、この CSS メソッドが好きです。

これを CSS ファイルに配置します。

div#preload { display: none; }

これを HTML ドキュメントの一番下に配置します。

<div id="preload">
   <img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" />
</div>

この方法により、画像がプリロードされ、ドキュメントの他の場所で使用できるようになります。プリロードされたイメージと同じパスを使用することを忘れないでください。

http://perishablepress.com/pure-css-better-image-preloading-without-javascript/