assetsの読み込み前にDOMの制御をしたい場合はDOMContentLoadedを使う

January 29, 2018

すべてのCSSや画像などのassetsの読み込みまで待つのは時間がかかってしまうので避けたい。

しかしDOMの制御をするためにDOMの読み込みをすべて待ってから処理をしたい場合は、DOMContentLoadedを使う。

DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に発火する。
スタイルシートや画像、サブフレームの読み込みが終わるのを待たない。

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var div = document.getElementById("domain-name");
    div.textContent = 'hogefuga';
  });
</script>

load

ページが完全に読み込み終わったときに処理をしたい場合は、loadを使用する

<script>
  window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });
</script>

javascript