プログラミング

【PR】を含みます。

【JavaScript】ページ読み込み・表示関連イベントの発火タイミングと使用方法

JavaScript ページ読み込み・表示関連イベントの発火タイミングと使用方法

JavaScriptのページ読み込み・ページ表示関連イベントの発火順序と使用方法をまとめました。

ページ読み込み・ページ表示関連イベントの発火タイミング

この記事では、readystatechange、DOMContentLoaded、load、pageshowイベントの発火順序を紹介します。

ページ読み込み・ページ表示関連イベントの発火順序

  1. readystate: loading

    ページの読み込みが開始された段階
    ※HTMLのダウンロードが始まり、まだDOMの構築が完了していない状態

  2. readystatechange: interactive

    DOMの構築が完了し、ユーザーがページのコンテンツにアクセスできる状態
    まだ画像やスタイルシートなどのリソースは読み込まれていない可能性がある

  3. DOMContentLoaded

    HTMLの解析とDOMツリーの構築が完了した段階
    ※外部リソース（画像やスタイルシートなど）はまだ読み込み中の場合もある

  4. readystatechange: complete

    ページ内のすべてのリソース（画像やスタイルシート、サブフレームなど）が完全に読み込まれた段階

  5. load

    ページ全体の読み込みが完全に終わり、すべてのリソース（外部ファイルを含む）が利用可能になった段階

  6. pageshow

    ページが表示されたときに発火
    ※新規ロードだけでなく、ページがキャッシュから復元された場合にも発火します

readystatechange: interactiveとDOMContentLoadedの違い

readystatechange: interactive≒DOMContentLoadedですが、少し違いがあります。

readystatechange: interactiveはdocument.readyStateがinteractiveに変わることを意味します。これは、DOMの解析が完了し、ユーザーがインタラクション（操作）を開始できる状態になったことを示します。

DOMContentLoadedイベントは、DOMの構築が完了し、すべてのHTMLが読み込まれて解析されたときに発火します。

DOMContentLoadedは、DOMの準備が整ったときに発火するものであり、この時点でdocument.readyStateはinteractiveまたはそれ以降の状態であるため、DOMContentLoadedがreadystatechange: interactiveよりも早く発火することは通常ありません。

readystatechange: completeとloadの違い

readystatechange: complete≒loadですが、少し違いがあります。

readyState プロパティが 'complete' になるのは、ドキュメントの全てのリソースが読み込まれた時点を指します。具体的には、DOM ツリーが構築され、すべてのサブリソース（画像、スタイルシート、スクリプトなど）の読み込みが完了したときに発生します。
※外部のリソース（動画やiframe内のコンテンツなど）は含まれない場合があります。

load イベントは、ページ上のすべてのリソース（画像、スタイルシート、スクリプト、外部リソース）の読み込みが完了した後に発生します。

ページ読み込み・ページ表示関連イベントの発火タイミング検証用コード

イベントの発火までに掛かった時間を計測し、コンソールで確認できるようにコードを調整しました。

JavaSctipt
Copy
  1. // ページ読み込み開始時点のタイムスタンプを取得
  2. const startTime = performance.now();
  4. function logTime(eventName) {
  5.   const currentTime = performance.now();
  6.   console.log(`${eventName} - 発火までの時間: ${currentTime - startTime} ms`);
  7. }
  9. // readyStateの現在の状態
  10. if (document.readyState === 'loading') {
  11.   logTime('readystate: loading');
  12. }
  14. // readystatechangeイベントの状態変化の監視
  15. document.addEventListener('readystatechange', function() {
  16.   logTime(`readystatechange: ${document.readyState}`);
  17. });
  19. // DOMContentLoadedの監視
  20. document.addEventListener('DOMContentLoaded', function() {
  21.   logTime('DOMContentLoaded');
  22. });
  24. // loadイベントの監視
  25. window.addEventListener('load', function() {
  26.   logTime('load');
  27. });
  29. // pageshowイベントの監視
  30. window.addEventListener('pageshow', function() {
  31.   logTime('pageshow');
  32. });

readystatechangeイベントの使用方法

readystatechangeイベントは、読み込み状態が変わるたびに発生します。

document.readyStateプロパティを使用して、現在の状態を確認できます。主要な状態は以下の通りです。

loading
ドキュメントが読み込まれている途中。
※readystatechangeイベントは読み込み状態が変わるたびに発生するため、loadingを検知することはできません。
interactive
ドキュメントが完全に読み込まれたが、他のリソースはまだ読み込み中。
complete
ドキュメントとすべてのリソース（画像、スタイルシートなど）が完全に読み込まれた状態。 ※外部リソースは除く

addEventListenerメソッドを使った書き方

addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。

一般的にはaddEventListenerの使用が推奨されます。

JavaSctipt
Copy
  1. document.addEventListener('readystatechange', function() {
  2.   if (document.readyState === 'interactive') {
  3.     // 例えば、ユーザーが操作可能になるタイミングで実行したい処理
  4.     console.log('DOMの構築が完了');
  5.   } else if (document.readyState === 'complete') {
  6.     // すべてのリソースが読み込まれた後に実行する処理
  7.     console.log('すべてのリソースが読み込み完了');
  8.   }
  9. });

onreadystatechangeプロパティを使った書き方

このプロパティには1つのイベントハンドラーしか設定できません。

既存のハンドラーを上書きしてしまう可能性があります。

JavaSctipt
Copy
  1. document.onreadystatechange = function() {
  2.   if (document.readyState === 'interactive') {
  3.     console.log('DOMの構築が完了');
  4.     // 例えば、ユーザーが操作可能になるタイミングで実行したい処理
  5.   } else if (document.readyState === 'complete') {
  6.     // すべてのリソースが読み込まれた後に実行する処理
  7.     console.log('すべてのリソースが読み込み完了');
  8.   }
  9. };

DOMContentLoadedイベントの使用方法

DOMContentLoadedは、HTML文書が完全に読み込まれ、DOM解析されたときに発火するイベントです。

画像やスタイルシート、その他のリソースがすべて読み込まれた後ではなく、HTMLの構造が完全に解析された時点で発火します。

このイベントは、DOMの構造が整ってからスクリプトを実行するため、DOM要素が存在しない状態でスクリプトを実行してエラーが発生するのを防ぐことができます。

addEventListenerメソッドを使った書き方

JavaSctipt
Copy
  1. document.addEventListener('DOMContentLoaded', function() {
  2.   // DOMが完全に読み込まれたときに実行するコード
  3.   console.log('DOMが完全に読み込まれました');
  4. });

loadイベントの使用方法

loadイベントは、HTML文書全体や特定のリソース（画像、スクリプト、スタイルシートなど）が完全に読み込まれた後に発火します。

DOMContentLoadedイベントがDOMが構築されたときに発火するのに対し、loadイベントは、ページ内のすべてのリソースが読み込まれたときに発生します。

addEventListenerメソッドを使った書き方

addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。

一般的にはaddEventListenerの使用が推奨されます。

JavaSctipt
Copy
  1. window.addEventListener('load', function() {
  2.   console.log('すべてのリソースが読み込まれました');
  3. });

onloadプロパティを使った書き方

このプロパティには1つのイベントハンドラーしか設定できません。

既存のハンドラーを上書きしてしまう可能性があります。

JavaSctipt
Copy
  1. window.onload = function() {
  2.   console.log('すべてのリソースが読み込まれました');
  3. };

画像などのリソースが読み込まれたときに発火させる

JavaSctipt
Copy
  1. let img = document.querySelector('img');
  3. if (img.complete) {
  4.   // 画像が既に読み込まれている場合
  5.   console.log('画像が既に読み込まれています');
  6. } else {
  7.   // 画像が読み込まれていない場合
  8.   img.addEventListener('load', function() {
  9.     console.log('画像が読み込まれました');
  10.   });
  11. }

loadイベントの用途

画像や外部リソースが完全に読み込まれた後でなければ処理を行いたくないケースで使用されます。

例えば、すべての画像が表示されてからレイアウトの調整やアニメーションを開始するような場合です。

loadイベントの注意点

loadイベントはページ全体のリソースが読み込まれるまで待機するため、動作が遅れる可能性があります。

DOMが準備された時点で処理を開始したい場合は、DOMContentLoadedイベントを使う方が適しています。

pageshowイベントの使用方法

pageshowイベントは、ウェブページが表示されたときに発火するイベントです。ページが再読み込みされるとき、またはキャッシュから復元されるときに発生します。

特に、ブラウザの「戻る」や「進む」ボタンを使った場合に、キャッシュされたページが表示される際にもトリガーされるため、通常の load イベントとは異なります。

addEventListenerメソッドを使った書き方

pageshowイベントは、通常windowオブジェクトにバインドして使用します。

addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。

一般的にはaddEventListenerの使用が推奨されます。

JavaSctipt
Copy
  1. window.addEventListener('pageshow', function(event) {
  2.   console.log('ページが表示されました');
  3. });

onpageshowプロパティを使った書き方

このプロパティには1つのイベントハンドラーしか設定できません。

既存のハンドラーを上書きしてしまう可能性があります。

JavaSctipt
Copy
  1. window.onpageshow = function(event) {
  2.   console.log('ページが表示されました');
  3. };

persistedプロパティでページがキャッシュから復元されたかどうかを判定

JavaSctipt
Copy
  1. window.addEventListener('pageshow', function(event) {
  2.   if (event.persisted) {
  3.     console.log('ページがキャッシュから復元されました。');
  4.   } else {
  5.     console.log('ページが通常のロードで表示されました。');
  6.   }
  7. });

pageshowイベントの用途

  • キャッシュされているページの状態をリセットする
    ユーザーがブラウザの「戻る」ボタンを使用した際に、ページが再表示されたときに必要な初期化処理を行いたい場合。
  • フォームの再送信防止
    ページがキャッシュから復元される場合に、フォームのデータをリセットするなどの処理を行うことができます。
  • アニメーションやスクロール位置のリセット
    キャッシュから復元されたページで、アニメーションやスクロール位置をリセットするために使用できます。

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-