以下のように画像（img要素）がたくさんあるページで、画像の読み込み状況のパーセンテージをテキストとprogress要素で目視で確認できるようにしたい…。

HTMLで画像とprogress要素、読み込みのパーセンテージを表示するテキスト領域を用意します。

<p id="load">Loading:0%</p>
<progress value="0" max="100" id="progress"></progress>
<p><img src="sample1.jpg" width="640" height="480" alt="画像1"></p>
<p><img src="sample2.jpg" width="640" height="480" alt="画像2"></p>
<p><img src="sample3.jpg" width="640" height="480" alt="画像3"></p>

JavaScriptのコードです。img要素の数だけループを回して画像の読み込みが完了したら数値とプログレスバーに反映させます。また、万が一画像が見つからないなどエラーのときも無視して数値とプログレスバーに反映させて不整合が起きないようにしました。

window.addEventListener('DOMContentLoaded', function () {
 const loadElm = document.getElementById('load');
 const imgElm = document.querySelectorAll('img');
 const progressElm = document.getElementById('progress');
 const imgMax = imgElm.length;
 let count = 0;
 const loadResult = () => {
  return Math.floor(count / imgMax * 100);
 }
 imgElm.forEach((elm) => {
  elm.addEventListener('error', (e) => {
   count++;
   loadElm.textContent = `Loading:${loadResult()}%`;
   progressElm.value = loadResult();
   console.error(`Error: ${e.target.src}`); //エラーのあった画像ファイル名をコンソールに表示
  });
  elm.addEventListener('load', (e) => {
   count++;
   loadElm.textContent = `Loading:${loadResult()}%`;
   progressElm.value = loadResult();
   console.log(`Load: ${e.target.src}`); //読みんだ画像ファイル名をコンソールに表示
  });
 });
});

実行例。progress要素などの見た目はCSSでカスタマイズしています。

注意点としては、スクロールにそって画像を遅延読み込みさせるJavaScriptライブラリや、img要素のloading="lazy"属性は使用しないよう注意しましょう。事前に画像が読み込まれなくなってしまうので正常にローディングが動きません。

おしまい♥