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

#023

posted on 2021.01.29

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

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終了タグの直前に実行処理を記述するか、addEventListenerメソッドでDOMContentLoadedイベントを使う。

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

jQueryの場合はreadyイベントを使う。

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

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

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

addEventListenerメソッドでloadイベントを使う。

window.addEventListener('load', function(){
   // 実行したい処理..
});
//上記と同じ動作(この記述方法の場合は、複数あると上書きされる)
window.onload = function(){
   // 実行したい処理..
}

jQueryの場合はonメソッドでloadイベントを使う。

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

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

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

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

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

イベントの発火は、「interactive」と「complete」に変化するときの2回。

現在のステータスの値は「document.readyState」で参照できる。

addEventListenerメソッドでreadystatechangeイベントを使う。

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構築を止めることなく並走してスクリプトを読み込み、実行する方法。

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

JavaScriptでHTMLの<script>要素を生成し、src属性に読み込みたいファイルを指定してDOM内の任意の場所に挿入する。

※ 処理のタイミングが保証されない、DOMContentLoadedイベントも受け取れないので、実行するスクリプトにDOMのHTML要素や他の読み込みファイルに依存する処理がある場合は注意が必要。

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

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

src属性でファイル読み込みしている<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ファイルから順次処理を実行する。

この記事へのコメント

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

返信をキャンセル ×