注目キーワード
  1. npm
  2. composer
  3. css

[JavaScript] ドキュメントの読み込み後に処理を実行するコード

概要

本来は下記のようなコードで、ドキュメントの読み込み後に処理を実行してほしいのですが、諸事情でうまく呼び出されないことがあります。

window.addEventListener("load", eventAfterLoad);

なので、実際には下記のようなコードを使います。

if (document.readyState !== 'loading') {
	eventAfterLoad();
} else {
	document.addEventListener('DOMContentLoaded', eventAfterLoad, false);
	// or window.addEventListener("load", eventAfterLoad);
}

説明

なぜaddEventListener(“load”)はうまくいかないのか

最初のコードが上手く呼び出されない理由の一つに、scriptタグでasyncを利用しているとloadが呼び出されないという問題があるようです。

<!-- loadイベントは呼び出されない!(…かもしれない) -->
<script async src="app.js"></script>

昨今はGoogleの推奨もあって、scriptタグでasyncを指定する場合は多いと思いますが、この場合は非同期で読み込まれる為、loadイベントの発火後にaddEventListenerが呼び出されてしまうことがあるようです。

なぜloadではなくDOMContentLoadedなのか

loadはDOM要素の計算後に呼び出されますが、DOMContentLoadedはDOMの読み込み後、計算前に呼び出される為、描画速度の向上が期待出来ます。
ただし、DOM要素の計算後の値(高さや幅など)が必要な場合は、従来通りにloadを使います。