JavaScript: DOMContentLoaded イベント、MutationObserver、Intersection Observer との比較
2024-04-02
JavaScript、jQuery、DOMイベントにおける window.onload と $(document).ready() の違い
window.onload と $(document).ready() は、いずれもJavaScriptでウェブページの読み込み完了時に処理を実行するための関数です。しかし、それぞれの動作には微妙な違いがあり、状況に応じて使い分ける必要があります。
読み込みタイミング
window.onload: ページ全体の読み込み完了時に実行されます。これは、HTML、CSS、JavaScript、画像などのすべてのコンテンツが読み込まれた後に発生します。$(document).ready(): DOM (Document Object Model) の読み込み完了時に実行されます。これは、HTML文書の解析が完了し、DOMツリーが構築された後に発生します。画像などの外部リソースはまだ読み込まれていない可能性があります。
具体的な違い
| 項目 | window.onload | $(document).ready() |
|---|---|---|
| 読み込み対象 | ページ全体 (HTML、CSS、JavaScript、画像など) | DOM (HTML文書) |
| 発生タイミング | 全てのコンテンツ読み込み後 | DOM構築後 |
| 複数回の登録 | 不可 (上書きされる) | 可能 |
| 汎用性 | 高い | jQueryを使用している場合のみ |
使い分け
- 画像や外部リソースの読み込みに依存する処理には
window.onloadを使用します。 - DOM操作のみを行う処理には
$(document).ready()を使用します。 - jQueryを使用している場合は、
$(document).ready()を使用するのが一般的です。
コード例
// window.onload の例
window.onload = function() {
// 全てのコンテンツが読み込まれた後に実行される処理
alert('ページの読み込みが完了しました');
};
// $(document).ready() の例
$(document).ready(function() {
// DOM構築後に実行される処理
$('h1').text('Hello, world!');
});
補足
window.onloadは純粋なJavaScriptの機能ですが、$(document).ready()はjQueryの機能です。$(document).ready()はDOMContentLoadedイベントをラップしたものと考えて良いでしょう。
window.onload = function() {
// 全てのコンテンツが読み込まれた後に実行される処理
// 画像の読み込み完了を確認
const img = document.querySelector('img');
if (img.complete) {
// 画像が読み込まれている場合
alert('画像の読み込みが完了しました');
} else {
// 画像が読み込まれていない場合
img.addEventListener('load', function() {
alert('画像の読み込みが完了しました');
});
}
// その他の処理
// ...
};
$(document).ready() の例
$(document).ready(function() {
// DOM構築後に実行される処理
// ボタンクリックイベントの登録
$('button').click(function() {
alert('ボタンがクリックされました');
});
// その他の処理
// ...
});
複数のイベント登録
window.onload は上書きされるため、複数回の登録はできません。一方、$(document).ready() は複数回登録することが可能です。
$(document).ready(function() {
// 最初の処理
alert('最初の処理');
});
$(document).ready(function() {
// 2番目の処理
alert('2番目の処理');
});
jQueryの省略記法
$(document).ready(function() { ... }); は以下の省略記法で記述できます。
$(function() {
// ...
});
その他
- 上記のサンプルコードはあくまで例です。実際の使用例は状況によって異なります。
window.onload と $(document).ready() 以外の方法
DOMContentLoaded イベントは、DOM構築が完了した時に発生します。画像などの外部リソースはまだ読み込まれていない可能性があります。
document.addEventListener('DOMContentLoaded', function() {
// DOM構築後に実行される処理
});
MutationObserver は、DOMツリーの変更を監視する API です。ページ読み込み完了時に処理を実行するには、document オブジェクトに対して MutationObserver を作成し、subtree オプションを true に設定します。
const observer = new MutationObserver(function(mutations) {
// DOMツリーの変更が検出された時に実行される処理
});
observer.observe(document, {
subtree: true
});
const observer = new IntersectionObserver(function(entries) {
// 要素がビューポートに表示された時に実行される処理
});
observer.observe(document, {
root: null
});
スクリプトを HTML ファイルの <head> 要素内に配置すると、ページ読み込み時に自動的に実行されます。ただし、この方法では DOM がまだ構築されていない可能性があるため、注意が必要です。
<head>
<script src="script.js"></script>
</head>
その他
上記以外にも、ページ読み込み完了時に処理を実行する方法はいくつかあります。詳細は以下の参考資料を参照してください。
javascript jquery dom-events
