Webページ上で画像が正しく読み込まれたかを検知し、それに応じた処理を行いたい場面は多くあります。例えば、画像が表示された後にアニメーションを始める、ローディングを解除する、あるいは画像読み込み失敗時に代替処理を行うなどです。この記事では、JavaScriptを使って画像の読み込み完了を検知する方法とその実装例を解説します。
img.onload を使った基本的な方法
最も基本的な方法は、画像の onload イベントを使うことです。このイベントは画像の読み込みが完了したタイミングで発火します。
<img id="myImage" src="sample.jpg" alt="サンプル画像">
<script>
const img = document.getElementById('myImage');
img.onload = function () {
console.log('画像の読み込みが完了しました');
// ここに処理を書く
};
</script>この方法では、画像がキャッシュから読み込まれていた場合に onload が発火しないことがあります。これを補うには、complete プロパティを使って画像の読み込み状態を確認するのが一般的です。
キャッシュ対応を考慮した実装
画像がすでにキャッシュされている場合も含めて、確実に読み込み状態を検知したい場合は以下のような記述が有効です。
const img = document.getElementById('myImage');
if (img.complete) {
console.log('画像はすでに読み込まれています');
// 読み込み後の処理をここで実行
} else {
img.onload = function () {
console.log('画像の読み込みが完了しました');
// 読み込み後の処理をここで実行
};
}このようにすることで、画像がすでに読み込まれているかどうかを判定して、適切なタイミングで処理を実行することができます。
読み込み失敗時の対応
画像が存在しない、あるいはネットワークエラーなどで読み込みに失敗した場合は onerror を利用します。
img.onerror = function () {
console.error('画像の読み込みに失敗しました');
// 代替処理など
};onload と併用することで、成功・失敗のどちらにも対応できます。
動的に画像を生成する場合の注意点
JavaScriptで新しく画像要素を生成して読み込む場合も同様に onload と onerror を使えます。
const newImg = new Image();
newImg.src = 'sample.jpg';
newImg.onload = function () {
console.log('動的に生成した画像の読み込みが完了しました');
};
newImg.onerror = function () {
console.error('画像の読み込みに失敗しました');
};
document.body.appendChild(newImg);この方法は、画像を遅延読み込みしたり、ユーザーの操作に応じて画像を動的に切り替えたいときに有効です。
まとめ
画像の読み込み完了を確実に検知するには、onload イベントに加えて complete プロパティをチェックする実装が必要です。また、読み込み失敗時には onerror を活用しましょう。これにより、ユーザー体験を損なうことなく、安定した挙動を実現できます。画像の読み込み状況に応じた処理を行いたい場面では、これらのテクニックを柔軟に組み合わせることが重要です。
