【JavaScript】loadイベントとは？ページの読み込み後に処理を実行させる

後輩ちゃん

先輩！今日は何を教えてくれるんですか？

先輩くん

今日は、JavaScriptのloadイベントの使い方について教えるよ！

後輩ちゃん

よろしくお願いします！

loadイベントとは、画像やスタイルシートなど全てのリソースの読み込みが完了したタイミングで発火するイベントです。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

本書情報

出版社	技術評論社
著者	山田 祥寛
発売日	2023/2/13
ページ数	624ページ
レビュー (Amazon)	(4件)

先輩くん

10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！

後輩ちゃん

最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！

【送料無料】 改訂3版JavaScript本格入門 -モダンスタイルによる基礎から現場での応用まで / 山田祥寛 【本】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

loadイベントの使い方

先輩くん

loadイベントは、addEventListenerメソッドにloadを指定する方法とonloadプロパティを使う2種類あります！

後輩ちゃん

使い方をそれぞれ別々に解説してるよ！

addEventListenerを使ったloadイベントの書き方

window.addEventListener('load',function(){
  // 処理内容を記述
});

windowオブジェクトに対してaddEventListenerメソッドを使います。第一引数に「load」を指定し、第二引数に指定した関数内にページの読み込みが完了された時に実行したい処理を記述します。

先輩くん

loadを使ったサンプルコードは以下の通りです。

onloadプロパティの書き方

window.onload = function(){
  // 処理内容を記述
};

addEventListenerメソッドと同様にwindowオブジェクトに対して、onloadプロパティを使い関数を代入します。代入した関数に全てのリソースが読み込まれたタイミングで実行したい処理を記述します。

先輩くん

onloadプロパティを使ったサンプルコードは以下の通りです。

上記サンプルの処理は、addEventListenerメソッドを使ったものと同様で画像の読み込みが完了後に画像の横幅の値を取得し表示させています。

addEventListenerメソッドのloadイベントとonloadプロパティの違い

後輩ちゃん

loadイベントの2種類の書き方について理解できたのですが、2つの違いはあるんですか？

先輩くん

大きな違いとしてイベントを複数登録できるか、できないかの違いがあるよ！
これについては別記事で詳しく解説しているから興味のある方は下記のURLを参考にしてね！

loadイベントが必要になる場面

loadイベントは、初心者向けの参考書などでおまじないとして書いておくとチラホラ見受けますが、全ての読み込みが完了してから処理を実行するためボリュームのあるページなどでは読み込に時間がかかります。

画像のサイズを取得したいなどの処理では、loadイベントを使う必要がありますがDOMのツリー構築が完了した時点で実行できる処理の場合は「DOMContentLoaded」を使う方がloadイベントよりも早く動作することができます。

まとめ

今回はJavaScriptのloadイベントの使い方について解説しました。
最後にポイントを軽くおさらいしましょう。