もくじ
JavaScriptのページ読み込み・ページ表示関連イベントの発火順序と使用方法をまとめました。
ページ読み込み・ページ表示関連イベントの発火タイミング
この記事では、readystatechange、DOMContentLoaded、load、pageshowイベントの発火順序を紹介します。
ページ読み込み・ページ表示関連イベントの発火順序
readystate: loading
ページの読み込みが開始された段階
※HTMLのダウンロードが始まり、まだDOMの構築が完了していない状態readystatechange: interactive
DOMの構築が完了し、ユーザーがページのコンテンツにアクセスできる状態
まだ画像やスタイルシートなどのリソースは読み込まれていない可能性があるDOMContentLoaded
HTMLの解析とDOMツリーの構築が完了した段階
※外部リソース(画像やスタイルシートなど)はまだ読み込み中の場合もあるreadystatechange: complete
ページ内のすべてのリソース(画像やスタイルシート、サブフレームなど)が完全に読み込まれた段階
load
ページ全体の読み込みが完全に終わり、すべてのリソース(外部ファイルを含む)が利用可能になった段階
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 イベントは、ページ上のすべてのリソース(画像、スタイルシート、スクリプト、外部リソース)の読み込みが完了した後に発生します。
ページ読み込み・ページ表示関連イベントの発火タイミング検証用コード
イベントの発火までに掛かった時間を計測し、コンソールで確認できるようにコードを調整しました。
// ページ読み込み開始時点のタイムスタンプを取得
const startTime = performance.now();
function logTime(eventName) {
const currentTime = performance.now();
console.log(`${eventName} - 発火までの時間: ${currentTime - startTime} ms`);
}
// readyStateの現在の状態
if (document.readyState === 'loading') {
logTime('readystate: loading');
}
// readystatechangeイベントの状態変化の監視
document.addEventListener('readystatechange', function() {
logTime(`readystatechange: ${document.readyState}`);
});
// DOMContentLoadedの監視
document.addEventListener('DOMContentLoaded', function() {
logTime('DOMContentLoaded');
});
// loadイベントの監視
window.addEventListener('load', function() {
logTime('load');
});
// pageshowイベントの監視
window.addEventListener('pageshow', function() {
logTime('pageshow');
});
readystatechangeイベントの使用方法
readystatechangeイベントは、読み込み状態が変わるたびに発生します。
document.readyStateプロパティを使用して、現在の状態を確認できます。主要な状態は以下の通りです。
- loading
- ドキュメントが読み込まれている途中。
※readystatechange
イベントは読み込み状態が変わるたびに発生するため、loading
を検知することはできません。
- interactive
- ドキュメントが完全に読み込まれたが、他のリソースはまだ読み込み中。
- complete
- ドキュメントとすべてのリソース(画像、スタイルシートなど)が完全に読み込まれた状態。 ※外部リソースは除く
addEventListenerメソッドを使った書き方
addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。
一般的にはaddEventListener
の使用が推奨されます。
document.addEventListener('readystatechange', function() {
if (document.readyState === 'interactive') {
// 例えば、ユーザーが操作可能になるタイミングで実行したい処理
console.log('DOMの構築が完了');
} else if (document.readyState === 'complete') {
// すべてのリソースが読み込まれた後に実行する処理
console.log('すべてのリソースが読み込み完了');
}
});
onreadystatechangeプロパティを使った書き方
このプロパティには1つのイベントハンドラーしか設定できません。
既存のハンドラーを上書きしてしまう可能性があります。
document.onreadystatechange = function() {
if (document.readyState === 'interactive') {
console.log('DOMの構築が完了');
// 例えば、ユーザーが操作可能になるタイミングで実行したい処理
} else if (document.readyState === 'complete') {
// すべてのリソースが読み込まれた後に実行する処理
console.log('すべてのリソースが読み込み完了');
}
};
DOMContentLoadedイベントの使用方法
DOMContentLoadedは、HTML文書が完全に読み込まれ、DOM解析されたときに発火するイベントです。
画像やスタイルシート、その他のリソースがすべて読み込まれた後ではなく、HTMLの構造が完全に解析された時点で発火します。
このイベントは、DOMの構造が整ってからスクリプトを実行するため、DOM要素が存在しない状態でスクリプトを実行してエラーが発生するのを防ぐことができます。
addEventListenerメソッドを使った書き方
document.addEventListener('DOMContentLoaded', function() {
// DOMが完全に読み込まれたときに実行するコード
console.log('DOMが完全に読み込まれました');
});
loadイベントの使用方法
loadイベントは、HTML文書全体や特定のリソース(画像、スクリプト、スタイルシートなど)が完全に読み込まれた後に発火します。
DOMContentLoadedイベントがDOMが構築されたときに発火するのに対し、loadイベントは、ページ内のすべてのリソースが読み込まれたときに発生します。
addEventListenerメソッドを使った書き方
addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。
一般的にはaddEventListener
の使用が推奨されます。
window.addEventListener('load', function() {
console.log('すべてのリソースが読み込まれました');
});
onloadプロパティを使った書き方
このプロパティには1つのイベントハンドラーしか設定できません。
既存のハンドラーを上書きしてしまう可能性があります。
window.onload = function() {
console.log('すべてのリソースが読み込まれました');
};
画像などのリソースが読み込まれたときに発火させる
let img = document.querySelector('img');
if (img.complete) {
// 画像が既に読み込まれている場合
console.log('画像が既に読み込まれています');
} else {
// 画像が読み込まれていない場合
img.addEventListener('load', function() {
console.log('画像が読み込まれました');
});
}
loadイベントの用途
画像や外部リソースが完全に読み込まれた後でなければ処理を行いたくないケースで使用されます。
例えば、すべての画像が表示されてからレイアウトの調整やアニメーションを開始するような場合です。
loadイベントの注意点
loadイベントはページ全体のリソースが読み込まれるまで待機するため、動作が遅れる可能性があります。
DOMが準備された時点で処理を開始したい場合は、DOMContentLoadedイベントを使う方が適しています。
pageshowイベントの使用方法
pageshowイベントは、ウェブページが表示されたときに発火するイベントです。ページが再読み込みされるとき、またはキャッシュから復元されるときに発生します。
特に、ブラウザの「戻る」や「進む」ボタンを使った場合に、キャッシュされたページが表示される際にもトリガーされるため、通常の load イベントとは異なります。
addEventListenerメソッドを使った書き方
pageshowイベントは、通常windowオブジェクトにバインドして使用します。
addEventListenerメソッドを使用することで、同じイベントに対して複数のリスナーを追加できるため、複数の処理を同時に行うことが可能です。
一般的にはaddEventListener
の使用が推奨されます。
window.addEventListener('pageshow', function(event) {
console.log('ページが表示されました');
});
onpageshowプロパティを使った書き方
このプロパティには1つのイベントハンドラーしか設定できません。
既存のハンドラーを上書きしてしまう可能性があります。
window.onpageshow = function(event) {
console.log('ページが表示されました');
};
persistedプロパティでページがキャッシュから復元されたかどうかを判定
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
console.log('ページがキャッシュから復元されました。');
} else {
console.log('ページが通常のロードで表示されました。');
}
});
pageshowイベントの用途
- キャッシュされているページの状態をリセットする
ユーザーがブラウザの「戻る」ボタンを使用した際に、ページが再表示されたときに必要な初期化処理を行いたい場合。 - フォームの再送信防止
ページがキャッシュから復元される場合に、フォームのデータをリセットするなどの処理を行うことができます。 - アニメーションやスクロール位置のリセット
キャッシュから復元されたページで、アニメーションやスクロール位置をリセットするために使用できます。
udemyでJavaScriptを学ぶ
- 本格的な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でどのようにすればレベルアップできるのか悩んでいる方
- JavaScriptの動作原理について深く学びます。
- JavaScriptがどのように実行されるのかについて深く学びます。
- ES6+の最新のJavaScriptの記法について幅広く学びます。
- 変数や参照の仕組みについて深く学びます。
- オブジェクトのメカニズムについて深く学びます。
- 関数のメカニズムについて深く学びます。
- スコープの仕組みについて深く学びます。
- プロトタイプのメカニズムについて深く学びます。
- 反復処理のメカニズムについて深く学びます。
- ジェネレーターやイテレーターについて深く学びます。
- コールバック関数について深く学びます。
- 非同期処理のメカニズムについて深く学びます。
- モジュールの仕組みについて深く学びます。
- クロージャーの仕組みについて深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- thisの仕組みについて深く学びます。
- bind、apply、callの動作原理について深く学びます。
- クラスと継承の仕組みについて深く学びます。
- ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
- Map,Setなどの強力なコレクションについて実践を交えて学びます。
- よく使用される強力な実装パターンを演習を交えて学びます。
- 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
- JavaScriptをコアの動作原理からキチンと理解したい方。
- 自分の思った通りコードが動かずに悩んでいる方。
- 自分の思った通りに動かず、気付いたら解決するのに1日経ってしまっていた経験のある方。
- React, Vue, Angularが使いこなせず悩んでいる方。
- JavaScriptの不可解な動きが理解できず、苦しんでいる方。
- 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
- JavaScriptを本気で勉強したいと思っている方。
- JavaScriptの変態仕様に苦しんでいる方。
- JavaScriptが苦手なプログラマーの方。
もみじ
JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。
初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。
講座内容は実践で使用するものが多く、実務でも役立つ内容でした。