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

#023

posted on 2021.01.29

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

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の解析が完了した時点で実行

body終了タグの直前に実行処理を記述するか、addEventListenerメソッドでDOMContentLoadedイベントを使う。

HTMLドキュメントがすべて読み込まれ、DOMにアクセスする準備ができた時点で実行処理される。(画像のデータなどは待たない。)

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

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

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

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

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

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

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

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

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

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

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

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

//script要素を作成
const script = document.createElement('script');
//src属性の値に読み込みたいjsファイルのパスを代入
script.src = "ファイル名.js";
//作成したscript要素を任意の要素にappendする
document.getElementsByTagName('head')[0].appendChild(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ファイルから順次処理を実行する。

jQuery (2)