JavaScript プリロード画像

このチュートリアルでは、JavaScript を使用して画像をプリロードする方法を説明します。

画像をプリロードする方法について説明する前に、まず画像をプリロードする必要がある理由を理解しましょう。HTML で <image> タグを使用して画像を定義すると、ブラウザはその画像を確認してダウンロードし、ページが読み込まれる前にキャッシュします。画像の表示がかなり簡単になります。ただし、JavaScript コードによってトリガーされた画像の動的な読み込みがある場合、ブラウザーにはそれに関する事前情報がありません。そのため、このような画像をダウンロードしてキャッシュすることはできません。これらの画像はオンザフライで読み込まれ、画像が最初にダウンロードされるときに表示に遅延が発生します。ウェブサイトの見栄えが非常に悪くなるため、これらの画像はプリロードする必要があります。

例：ロールオーバー効果を表示する場合、つまり、マウスをロールオーバーしたときに表示される画像を変更する場合は、2 番目の画像がプリロードされていることを確認する必要があります。そうしないと、画像の読み込みに時間がかかり、ウェブサイトが醜く応答しなくなってしまいます。

JavaScript で画像をプリロードする

手順

コード

var preloaded = 0;
var images = new Array("img1.jpg", "img2.jpg", "img3.jpg");
 
function preLoader(e) {
    for (var i = 0; i < images.length; i++) {
        var tempImage = new Image();
         
        tempImage.addEventListener("load", progress, true);
        tempImage.src = imageArray[i];
    }
}
 
function progress() {
    preloaded++;
     
    if (preloaded == imageArray.length) {
        //ALL Images have been loaded, perform the desired action
    }
}
this.addEventListener("DOMContentLoaded", preLoader, true);