JavaScript プリロード画像
このチュートリアルでは、JavaScript を使用して画像をプリロードする方法を説明します。
画像をプリロードする方法について説明する前に、まず画像をプリロードする必要がある理由を理解しましょう。HTML で <image> タグを使用して画像を定義すると、ブラウザはその画像を確認してダウンロードし、ページが読み込まれる前にキャッシュします。画像の表示がかなり簡単になります。ただし、JavaScript コードによってトリガーされた画像の動的な読み込みがある場合、ブラウザーにはそれに関する事前情報がありません。そのため、このような画像をダウンロードしてキャッシュすることはできません。これらの画像はオンザフライで読み込まれ、画像が最初にダウンロードされるときに表示に遅延が発生します。ウェブサイトの見栄えが非常に悪くなるため、これらの画像はプリロードする必要があります。
例：ロールオーバー効果を表示する場合、つまり、マウスをロールオーバーしたときに表示される画像を変更する場合は、2 番目の画像がプリロードされていることを確認する必要があります。そうしないと、画像の読み込みに時間がかかり、ウェブサイトが醜く応答しなくなってしまいます。
JavaScript で画像をプリロードする
手順
-
変数
preloadedを開始して、プリロードフェーズ中にロードされた画像の数を格納し、画像の配列imagesを開始して、プリロードされるすべての画像のアドレスを格納します。 -
関数
preLoader()を定義して、プリロードする必要のあるすべての画像の画像オブジェクトを作成し、配列imagesのオブジェクトにsrcプロパティを格納します。また、正常にプリロードされた画像の数を維持し、すべての画像がプリロードされた後にアクションを実行する関数progress()をアタッチします。 -
DOM コンテンツが読み込まれるときに、
preLoader()を呼び出すイベントリスナーをウィンドウに追加します。
コード
javascriptCopyvar 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);
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn