JavaScript の DOMContentLoaded は画像の読みこみを待たない

HTML の読みこみが終わった後に DOM を作りたいときは

document.addEventListener('DOMContentLoaded', test, false)

とする。イベントリスナーに DOMContentLoaded を指定する。上のコードでは、すべての DOM が構築された後に test という関数が動く。

DOMContentLoaded は

1. 画像の読みこみは待たない
2. 自分より後のスタイルシートは待たない
3. 自分より前のスタイルシートは待つ
4. 外部スクリプトの読みこみは待つ
5. async は待たない
6. defer は待たない

画像をロードしている間に DOMContentLoaded が実行される可能性はある。DOMContentLoaded は外部スクリプトの読みこみは待つ。DOMContentLoaded は document に対して設定し、window には指定しない。

DOMContentLoaded と load の違い

load はツリーの解析だけでなく、画像も含めたすべてのリソースが読みこみが終わった時点で実行される。

document.addEventListener('load', test, false)