HTML の読みこみが終わった後に DOM を作りたいときは
document.addEventListener('DOMContentLoaded', function () {
test()
}, false)
とする。イベントリスナーに DOMContentLoaded を指定する。上のコードでは、すべての DOM が構築された後に test という関数が動く。
DOMContentLoaded は…
- 画像の読みこみは待たない
- 自分より後のスタイルシートは待たない
- 自分より前のスタイルシートは待つ
- 外部スクリプトの読みこみは待つ
- async は待たない
- defer は待たない
「構築」は構文の解析であり、リソース(画像など)の読みこみは関係ない。画像をロードしている間に DOMContentLoaded が実行される可能性はある。
DOMContentLoaded は外部スクリプトの読みこみは待つ。
DOMContentLoaded は document に対して設定する。window には指定しない。
DOMContentLoaded と load の違い
load はツリーの解析だけでなく、画像も含めたすべてのリソースが読みこみが終わった時点で実行される。
window.addEventListener('load', function(){
test()
},false)
ページ全体がきちんと読みこむまで待つため、通常はあまり使われない。
使い分けるコツ
重いもの、つまり画像そのものを利用するときは load を使う。画像があってもなくても関係ないものは DOMContentLoaded を使う。