load

ロード（イベント）

意味ページが完全に読み込まれたときのイベント。

loadとは？

文書や画像など、ページの全てのリソースが完全に読み込まれたときに発火するイベント。

loadの具体的な使い方

ページ読み込み完了時に処理を実行する例

<script>
window.addEventListener('load', function() {
  console.log('ページの読み込みが完了しました！');
  document.body.style.backgroundColor = 'lightblue';
  alert('ページの読み込みが完了し、背景色を変更しました。');
});
</script>

ページの読み込みが完了したら、コンソールにメッセージを出力し、背景色を変更して、アラートを表示します。

画像の読み込み完了を確認する例

const img = new Image();
img.src = 'https://example.com/large-image.jpg';

img.addEventListener('load', function() {
  console.log('画像の読み込みが完了しました。');
  console.log('画像のサイズ: ' + this.width + 'x' + this.height + 'px');
});

👇出力結果

画像の読み込みが完了しました。
画像のサイズ: 1024x768px

大きな画像の読み込みが完了したら、コンソールにメッセージとサイズ情報を出力します。

loadに関するよくある質問

Q. loadイベントの発火タイミングは？

A. loadイベントは、ページ上のすべてのリソース（画像、スタイルシート、スクリプトなど）が完全に読み込まれた後に発火します。

Q. DOMContentLoadedとの違いは？

A. loadイベントはすべてのリソースの読み込み後に発火しますが、DOMContentLoadedはHTMLの解析が完了した時点で発火します。loadは通常、DOMContentLoadedよりも遅く発生します。

Q. loadイベントの使用上の注意点は？

A. loadイベントは全リソースの読み込み後に発火するため、ユーザーの待ち時間が長くなる可能性があります。即時の処理が必要な場合は、DOMContentLoadedイベントの使用を検討してください。

loadが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのloadやonline、event.preventDefault()、unload、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。