#023
posted on 2021.01.29

JavaScriptをページ読み込みの任意のタイミングで実行。

ブラウザがサーバーからレスポンスを受け取ったあと、ページ読み込みが完了するまでの間のJavaScriptの実行タイミングの指定方法。忘れるのでメモ。

  1. DOMの解析の途中で任意に実行する。
  2. DOMの解析が完了(HTMLドキュメントの読み込みが完了)した時点で実行する。
  3. 画像などページのすべてのリソースデータの読み込みが完了した時点で実行する。
  4. ロードのステータス(readyState属性)が変化したときに実行する。
  5. DOMの解析とは非同期でjsファイルを読み込み、実行する。

 

 

DOMの解析の途中で実行

DOMの解析がスクリプトを記述した位置に達した時点で実行される。

 

HTML内の任意の場所に実行処理を記述する。

<!DOCTYPE html>
<html>
<head>
<!-- (1) headタグ内に記述 -->
</head>
<body>
<!-- (2) body内の任意の場所に記述 -->
<!-- (3) body終了タグ直前に記述 -->
</body>
</html>

(1) headタグ内に記述 : DOM読み込みの最初にスクリプト処理を実行したいとき。

(2) body内の任意の場所に記述 : DOM読み込み中の任意のタイミングでスクリプト処理を実行したいとき。

(3) body終了タグ直前に記述 : DOMを最後まで構築したタイミングでスクリプト処理を実行したいとき。

 

 

DOMの解析が完了した時点で実行

HTMLドキュメントがすべて読み込まれ、DOMにアクセスする準備ができた時点で実行される。

※ 画像などの副リソースの読み込みは待たない。

 

body終了タグの直前に記述するか、DOM解析完了時に発火する「DOMContentLoaded」イベントを使う。

 

documentオブジェクトのaddEventListener()メソッドで「DOMContentLoaded」イベントを指定する。

document.addEventListener('DOMContentLoaded', function(){
   // 実行したい処理..
});

jQueryの場合は、on()メソッドで「ready」イベントを指定する。

//onメソッドでの記述方法
$(document).on('ready', function(){
   // 実行したい処理..
}

//readyメソッドでの記述方法
$(document).ready(function(){
   // 実行したい処理..
});

//簡略化した記述方法
$(function(){
   // 実行したい処理..
});

 

 

すべてのデータの読み込みが完了した時点で実行

画像などページのすべてのリソースデータの読み込みが完了した時点で実行される。

 

すべてのデータの読み込み完了時に発火する「load」イベントを使う。

 

windowオブジェクトのaddEventListener()メソッドで「load」イベントを指定する。

※ windowオブジェクトの「onload」プロパティーに代入しても同じタイミングで動作するが、「onload」プロパティーの場合は、複数の場所に記述があると最後に代入した記述内容ですべてが上書きされる。

※ 副リソースのロードを捕捉する必要があるので、documentオブジェクトではなくwindowオブジェクトで実行する。

window.addEventListener('load', function(){
   // 実行したい処理..
});

//上記と同じ動作(この記述方法の場合は、複数あると最後の代入ですべて上書きされる)
window.onload = function(){
   // 実行したい処理..
}

jQueryの場合は、on()メソッドで「load」イベントを指定する。

$(window).on('load', function(){
   // 実行したい処理..
});

 

 

ロードのステータスが変化したら実行

ページロードのステータス(readyState属性)が変化するときに実行される。

 

ステータスは下記の順番で変化する。

  1. 「loading」: DOMの解析中。
  2. 「interactive」 : DOMの解析が済み、画像など副リソースの読み込み中。(DOMContentLoadedイベントより前に発火。)
  3. 「complete」 : 副リソースの読み込が完了。(loadイベントより前に発火。)

※ 現在のステータスの値は、documentオブジェクトの「readyState」プロパティーでで参照できる。(「document.readyState」)

 

documentオブジェクトのaddEventListener()メソッドで「readystatechange」イベントを指定する。

※ 「readystatechange」イベントの発火は、ステータスが「interactive」と「complete」に変化するときの2回。

document.addEventListener('readystatechange', function(){
   // 実行したい処理..

   // interactiveに変化したときだけ実行
   if(document.readyState === 'interactive'){
      // 実行したい処理..
   }

   // completeに変化したときだけ実行
   if(document.readyState === 'complete'){
      // 実行したい処理..
   }
});

jQueryの場合は、on()メソッドで「readystatechange」イベントを指定する。

$(document).on('readystatechange', function(){
   // 実行したい処理..

   // interactiveに変化したときだけ実行
   if(document.readyState === 'interactive'){
      // 実行したい処理..
   }

   // completeに変化したときだけ実行
   if(document.readyState === 'complete'){
      // 実行したい処理..
   }
});

 

 

非同期でjsファイルを読み込み、実行

DOMの解析とは非同期にすることで、DOM構築を止めることなく並走してスクリプトを読み込み、実行する方法。

 

1. JavaScriptで<script>要素を生成して読み込む方法

  1. JavaScriptでHTMLの<script>要素を動的に生成。
  2. src属性に読み込みたいjsファイルを指定。
  3. 生成した<script>要素をDOM内の任意の場所に挿入。

※ 読み込んだjsファイルの処理のタイミングは保証されない。

※ 読み込んだjsファイル内の処理で「DOMContentLoaded」イベントを受け取れない。

※ この方法で読み込むjsファイルにDOMのHTML要素や他の読み込みファイルに依存する処理がある場合は何らかの対処が必要。(何かの要素などにアクセスが必要な場合は、setInterval()メソッドで指定の要素が存在するか定期的に確認して、確認できるまで待機するなど。)

//script要素を作成
const ag2script = document.createElement('script');
//src属性の値に読み込みたいjsファイルのパスを代入
ag2script.src = "ファイル名.js";
//作成したscript要素をhead要素にappendする
document.getElementsByTagName('head')[0].appendChild(ag2script);

 

2. <script>タグの属性で指定する方法

src属性でjsファイルの読み込みをしている<script>タグの場合は、defer属性またはasync属性を記述する。(ブラウザの対応状況に注意。)

<script src="ファイル名.js" defer></script>
<script src="ファイル名.js" async></script>

defer属性 : DOMの解析を中断せず非同期でjsファイルを読み込むが、DOMの解析完了後(かつ「DOMContentLoaded」イベントの発生前)にスクリプトの処理を実行する。<script>タグの記述順にjsファイルの処理を実行していく。

async属性 : DOM構築とは関係無く非同期でjsファイルを読み込み、<script>タグの記述順ではなく、読み込みが完了したjsファイルから順次処理を実行する。

 

 

この記事をシェア
この記事のURL

https://memo.ag2works.tokyo/post-1199/

コピー
この記事のタイトル

JavaScriptをページ読み込みの任意のタイミングで実行。 | memo メモ [AG2WORKS]

コピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-1199/" target="_blank" rel="noopener">JavaScriptをページ読み込みの任意のタイミングで実行。 | memo メモ [AG2WORKS]</a>

コピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)