5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

画面の描画前にjavascriptを実行する方法(DOMContentLoadedイベントを利用)

画面の描画前にjavascriptを実行する方法

説明

画面が表示されたが、ロード中の為リンクなどを押下されたくないということがある。
その際に、一般的にはよく知られている「onload」イベントで「pointer-events: none」を指定すると思うが、これでは画面が描画仕切ってから実行されることになってしまう為、ロード中にユーザが操作をしてしまい、想定外の挙動をしてしまう可能性がある。
そこで利用するのが、以下のイベントである。

<イベント>
DOMContentLoaded

これは、htmlの解析が完了した時に発生するイベントの為、html内の画像やCSSやJavascriptの読み込み前に発生している。
その為、このイベントを利用すれば、画面の描画前に実行したいjavascriptを実行することが出来る。
具体的な利用方法を以下に記載する。

サンプルプログラム

ロード時にクリックをすべて無効化する指定を追加するプログラム

サンプルプログラム
window.addEventListener('DOMContentLoaded', function () {
  //bodyタグを取得
  var obj = document.querySelector("body");
  //bodyタグにクリックイベントを無効化するstyleを追加
  obj.setAttribute("style", "pointer-events: none;");  
  //コンソールへのログ出力
  console.log("DOMContentLoadedイベントが実行されました。");
});

検証

本当にonload前に実行されるのかを検証した結果を以下に記載する。

検証プログラム
<html lang="jp">
<header>
    <meta charset="utf-8"/>
    <script>
        //onloadイベントとDOMContentLoadedの実行順について
        window.addEventListener('load', function () {
            var div = document.querySelector("div");
            var p = document.createElement('p');
            p.innerText = "loadイベントが実行されました。";
            div.appendChild(p);
            console.log("loadイベントが実行されました。");
        });
        window.onload=function () {
            var div = document.querySelector("div");
            var p = document.createElement('p');
            p.innerText = "onloadイベントが実行されました。";
            div.appendChild(p);
            console.log("onloadイベントが実行されました。");
        };
        window.addEventListener('DOMContentLoaded', function () {
            var div = document.querySelector("div");
            var p = document.createElement('p');
            p.innerText = "DOMContentLoadedイベントが実行されました。";
            div.appendChild(p);
            console.log("DOMContentLoadedイベントが実行されました。");
        });
    </script>
</header>
<body>
    <div>これは、onloadイベントとDOMContentLoadedの実行順について検証するhtmlです。</div>
</body>
</html>

検証結果

image.png
画面に「"DOMContentLoadedイベントが実行されました。"」が「"loadイベントが実行されました。"」より前に表示されている為、onload前に実行されていることが分かった。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?