通常、画像は作成時にロードされます。したがって、<img>をページに追加しても、ユーザーはすぐに画像は表示されません。ブラウザーが最初にロードする必要があります。

画像をすぐに表示するには、次のように「事前に」作成できます。

let img = document.createElement('img');
img.src = 'my.jpg';

ブラウザーは画像のロードを開始し、キャッシュに記憶します。後で、同じ画像がドキュメントに表示されると（方法に関係なく）、すぐに表示されます。

すべての画像を配列sourcesからロードし、準備完了したらcallbackを実行する関数preloadImages(sources, callback)を作成します。

たとえば、画像はロードされた後にalertが表示されます。

function loaded() {
  alert("Images loaded")
}

preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);

エラーが発生した場合でも、関数は画像が「ロードされた」とみなす必要があります。

言い換えると、callbackはすべての画像がロードされたかエラーが発生したときに実行されます。

この関数は、たとえば、スクロール可能な画像を多数含むギャラリーを表示する予定で、すべての画像がロードされていることを確認したい場合に役立ちます。

ソースドキュメントには、テスト画像へのリンクと、画像がロードされているかどうかを確認するコードもあります。300が出力されます。

タスクのサンドボックスを開きます。