javascript 画像読み込み完了 判定

JavaScriptで画像読み込み完了を判定する方法

JavaScriptで画像読み込み完了を判定する方法

このページでは、JavaScriptを使用して画像の読み込みが完了したかどうかを判定する方法について解説します。画像の読み込み状況を把握することで、Webページの表示速度向上や、読み込み完了後の処理の実行などが可能になります。

1. 画像の読み込み完了イベントを使用する方法

  • 解説: img 要素の load イベントを使用して、画像の読み込みが完了したタイミングで処理を実行できます。
  • コード例: 
    
<img id="myImage" src="image.jpg" alt="画像">

<script>
const img = document.getElementById('myImage');

img.addEventListener('load', () => {
  console.log('画像の読み込みが完了しました');
  // 読み込み完了後に実行したい処理
});
</script>

2. complete プロパティを使用する方法

  • 解説: img 要素の complete プロパティは、画像の読み込みが完了している場合は true、そうでない場合は false を返します。
  • 注意点: 画像がキャッシュされている場合、 complete プロパティは true を返しますが、実際には読み込みが完了していない場合があります。
  • コード例: 
    
<img id="myImage" src="image.jpg" alt="画像">

<script>
const img = document.getElementById('myImage');

if (img.complete) {
  console.log('画像の読み込みは既に完了しています');
  // 読み込み完了後に実行したい処理
} else {
  console.log('画像の読み込みはまだ完了していません');
}
</script>

3. 読み込みエラー処理

  • 解説: error イベントを使用して、画像の読み込み中にエラーが発生した場合に処理を実行できます。
  • コード例: 
    
<img id="myImage" src="image.jpg" alt="画像">

<script>
const img = document.getElementById('myImage');

img.addEventListener('error', () => {
  console.error('画像の読み込み中にエラーが発生しました');
  // エラー処理
});
</script>

4. 複数画像の読み込み完了を判定する方法

  • 解説: 複数の画像の読み込み完了を判定するには、各画像の load イベントを監視し、全ての画像が読み込まれたことを確認する必要があります。
  • コード例: 
    
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<img src="image3.jpg" alt="画像3">

<script>
const images = document.querySelectorAll('img');
let loadedCount = 0;

images.forEach(img => {
  img.addEventListener('load', () => {
    loadedCount++;

    if (loadedCount === images.length) {
      console.log('全ての画像の読み込みが完了しました');
      // 読み込み完了後に実行したい処理
    }
  });
});
</script>

まとめ

JavaScriptで画像読み込み完了を判定する方法はいくつかあります。目的に合わせて適切な方法を選択しましょう。

参考文献

QA

質問 回答
画像の読み込み完了後にアニメーションを開始するにはどうすればよいですか？ 画像の`load`イベントリスナー内でアニメーションを開始するコードを実行します。
読み込みが完了していない画像を非表示にするにはどうすればよいですか？ CSSで`display: none;`を設定するか、JavaScriptで`style.display = 'none';`を設定します。読み込み完了後に表示するように変更します。
画像の読み込み進捗状況を表示するにはどうすればよいですか？ JavaScriptで`XMLHttpRequest`オブジェクトを使用し、`progress`イベントで読み込み状況を取得して表示します。

その他の参考記事:jquery 画像 読み込み