CallBack でイメージを読み込む

通常、イメージはそれらが作られたときにロードされます。そのため、<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 を出力するはずです。

アルゴリズム: