DOMコンテンツの読み込み前: JavaScriptの document.getElementById('page-title');
titleElement.textContent = 'DOMContentLoadedでタイトルを変更しました';
});
</script>
3. loadイベント: すべてのリソースの読み込み完了の合図
load イベントは、ページのすべてのリソース（画像、スタイルシート、JavaScriptファイルなど）が完全に読み込まれたときに発生します。
window.addEventListener('load', ...) を使用してこのイベントをリッスンし、すべてのリソースの読み込みが完了した後に、画像の読み込み完了後の処理や、すべてのリソースに依存するロジックの実行などのJavaScriptコードを実行します。
<script>
window.addEventListener('load', function() {
// すべてのリソースの読み込みが完了したら実行されるコード
console.log('loadイベントが発生しました！');
// 画像の読み込み完了後の処理
const imageElement = document.getElementById('my-image');
imageElement.addEventListener('load', function() {
// 画像の読み込みが完了した後の処理
});
});
</script>
4. DOMContentLoaded vs. load: どちらを使用すべきか？
JavaScriptコードがDOM要素を操作したり、外部リソースに依存しないロジックを実行したりする必要がある場合は、コードをできるだけ早く実行してページの読み込み速度を向上させるために、DOMContentLoaded イベントを使用する必要があります。
JavaScriptコードが画像、スタイルシートなどの外部リソースに依存する場合は、すべてのリソースが読み込まれた後にコードが確実に実行されるように、load イベントを使用する必要があります。
| イベント | 発生タイミング | ユースケース |
|---|---|---|
DOMContentLoaded |
DOMツリー構築完了時 | DOM操作、外部リソースに依存しないロジックの実行 |
load |
すべてのリソースの読み込み完了時 | 画像の読み込み完了後の処理、すべてのリソースに依存するロジックの実行 |
5. DOMContentLoadedの前にJavaScriptコードを実行する
ページのDOMが完全に構築される前にJavaScriptコードを実行する方法について理解しておくと、ページのパフォーマンスやユーザー体験を改善するための最適なアプローチを選択できます。
例えば、ページのレンダリングに影響を与えない軽量なスクリプトや、初期のユーザーインタラクションのためのスクリプトをDOMContentLoaded イベントを待たずに実行することが可能です。ただし、DOM要素の操作や、外部リソースに依存する処理を行う場合は、DOMContentLoaded イベントをリッスンすることが推奨されます。
このように、DOMContentLoaded と load イベントを適切に使い分けることで、ページのパフォーマンスとユーザー体験を向上させることができます。適切なイベントリスナーを選択し、効果的なJavaScriptの実行タイミングを確保しましょう。