iPentec.com / Doc / JavaScript

ページのDOMツリーが構築された直後、Webブラウザーの画面にページが表示される前にJavaScriptを実行する - DOMContentLoaded イベントの利用 - JavaScript

ページのDOMツリーが構築された直後、Webブラウザの画面にページが表示される前にJavaScriptを実行するコードを紹介します。

概要

Webブラウザにページの内容がレンダリングされて画面表示される前にJavaScriptを実行する場合、DOMContentLoaded イベントを利用します。
DOMContentLoaded イベントはページのDOMツリーが構築された直後に発生します。 loadイベントはページ読み込み後、DOMツリーを構築し、画像ファイルなどのコンテンツファイルが読み込み終わった時点で発生します。そのため、DOMContentLoaded は load イベントより先に実行され、ページが表示される前にJavaScriptを実行できます。

書式

一般的な利用では、documentオブジェクトの addEventListener メソッドでイベントリスナを設定して利用します。

document.addEventListener("DOMContentLoaded", function () {
 /* 処理内容を記述 */
});

document.addEventListener("DOMContentLoaded", [呼び出すイベントハンドラの関数名]);

またはアロー演算子の書式も利用できます。(ラムダ式に似た書式です。) Internet Explorerでは動作しません。

document.addEventListener("DOMContentLoaded",  (event) => {
 /* 処理内容を記述 */
});

補足

DOMContentLoaded はwindowオブジェクトのaddEventListener メソッドでウィンドウオブジェクトのイベントとして設定することもできます。

プログラム例1

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function OnDomContentLoadedFunc() {
      var obj = document.getElementById("message");
      obj.innerHTML += "DOMContentLoaded イベントが呼び出されました。<br/>";
    }
    function OnLoadFunc() {
      var obj = document.getElementById("message");
      obj.innerHTML += "onload イベントが呼び出されました。<br/>";
    }

    window.onload = OnLoadFunc;
    window.addEventListener("DOMContentLoaded", OnDomContentLoadedFunc, false);
  </script>
</head>
<body>
  <div id="message"></div>
</body>
</html>

解説

onloadイベントに、OnLoadFuncを設定し、DOMContentLoadedイベントに、OnDomContentLoadedDFunc を設定しています。それぞれのイベントハンドラの関数では、id="message" を持つ枠に対して、"onload イベントが呼び出されました。"、"DomContentLoaded イベントが呼び出されました。" のメッセージを表示しイベントが呼び出されたことを画面に表示するコードを実装しています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。onloadイベントより先にDOMContentLoadedイベントが呼び出されていることが確認できます。

プログラム例2

CSSを置換するデモで、Loadと、DOMContentLoaded を利用した場合での違いを確認します。

コード

DOMContentLoaded版

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      var elem = document.getElementById("PageStyleSheet");
      elem.href = "Style2.css";
    });
  </script>
  <link id="PageStyleSheet" rel="stylesheet" href="Style1.css" />
</head>
<body>
  <p class="title">CSSファイル変更デモ</p>
  <div class="frame1">
    枠1<br />
    ABCDEFG<br />
    1234567<br />
    <img src="image1.png" />
  </div>
</body>
</html>

Load版

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    window.addEventListener("load", function () {
      var elem = document.getElementById("PageStyleSheet");
      elem.href = "Style2.css";
    });
  </script>
  <link id="PageStyleSheet" rel="stylesheet" href="Style1.css" />
</head>
<body>
  <p class="title">CSSファイル変更デモ</p>
  <div class="frame1">
    枠1<br />
    ABCDEFG<br />
    1234567<br />
    <img src="image1.png" />
  </div>
</body>
</html>

解説

ページの読み込み後にCSSファイルを変更する処理を記述しています。CSSファイルの動的な変更の詳細はこちらの記事を参照してください。

実行結果

DOMContentLoaded版

DOMContentLoaded版を実行します。ページ表示時にCSSの差し替え部分にブレークポイントを設定します。

ページを表示します。ブレークポイントで停止します。停止した状態のWebブラウザを確認します。画面には何も表示されていないことが確認できます。

ブレークポイントから再開します。ページが表示され、CSS変更後の画面が表示されます。

Load版

Load版を実行します。ページ表示時にCSSの差し替え部分にブレークポイントを設定します。

ページを表示します。ブレークポイントで停止します。停止した状態のWebブラウザを確認します。画面にはすでにページが表示されており、CSSの変更前のデザインで表示されています。

ブレークポイントから再開します。ページが表示され、CSS変更後の画面が表示されます。

ページの読み込み時間が短い場合は、DOMContentLoaded版とLoad版の違いはほとんどわかりませんが、ページのサイズが大きくなると、 Load版はCSS変更前のデザインで表示された直後にCSS差し替えが発生するため、ページの表示時にちらつきが発生します。

補足

DOMContentLoadedを利用した場合に、DOMContentLoadedのJavaScriptイベントより手前にCSSのlinkタグがある場合、 DOMContentLoadedイベント実行時にはすでにCSSが反映される動作になる点に注意が必要です。

DOMContentLoaded版 (CSSのリンクがJavaScriptより手前にある)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link id="PageStyleSheet" rel="stylesheet" href="Style1.css" />
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      var elem = document.getElementById("PageStyleSheet");
      elem.href = "Style2.css";
    });
  </script>
</head>
<body>
  <p class="title">CSSファイル変更デモ</p>
  <div class="frame1">
    枠1<br />
    ABCDEFG<br />
    1234567<br />
    <img src="image1.png" />
  </div>
</body>
</html>

ページ表示時にCSSの差し替え部分にブレークポイントを設定します。