JavaScriptのloadとDOMContentLoadedイベントの違い
load
- Webページ内のすべてのソースが完全にロードされたタイミングで発火する
- HTML だけでなく、画像・CSS・スクリプト・iframe など、ページに紐づくリソースがすべて読み込み終わった時点
- 画像が重い・外部リソースが多いほど、発火が遅くなる
window に load イベントリスナーを付ける
window.addEventListener('load', () => {
console.log('すべてのリソースの読み込みが完了した');
});
DOMContentLoaded
- WebブラウザがHTMLを読み込み・解析し終えたタイミングで発火する
- あくまで「HTMLがどのような構造になっているか」が解析された状態
- 画像やスタイルシートの読み込み完了は待たない
- DOM が操作可能になった時点で発火するため、
loadより早く発火する
document に DOMContentLoaded イベントリスナーを付ける
document.addEventListener('DOMContentLoaded', () => {
console.log('HTMLの解析が完了し、DOMが利用可能になった');
});