Irohabook
0
1526

JavaScriptのDOMContentLoadedとloadの違い:DOMContentLoadedは画像の読みこみを待たない

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

document.addEventListener('DOMContentLoaded', function () {
    test()
}, false)

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

DOMContentLoaded は…

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

「構築」は構文の解析であり、リソース(画像など)の読みこみは関係ない。画像をロードしている間に DOMContentLoaded が実行される可能性はある。

DOMContentLoaded は外部スクリプトの読みこみは待つ。

DOMContentLoaded は document に対して設定する。window には指定しない。

DOMContentLoaded と load の違い

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

window.addEventListener('load', function(){
    test()
},false)

ページ全体がきちんと読みこむまで待つため、通常はあまり使われない。

使い分けるコツ

重いもの、つまり画像そのものを利用するときは load を使う。画像があってもなくても関係ないものは DOMContentLoaded を使う。

次の記事

配列