Document: DOMContentLoaded イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
DOMContentLoaded はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。
js
function doSomething() {
console.info("DOM loaded");
}
if (document.readyState === "loading") {
// Loading hasn't finished yet
document.addEventListener("DOMContentLoaded", doSomething);
} else {
// `DOMContentLoaded` has already fired
doSomething();
}
メモ:
ここでは競合条件はありません。 if チェックと addEventListener() 呼び出しの間に文書が読み込まれることはあり得ません。JavaScript には run-to-completion という意味づけがあります。つまり、イベントループのある特定のタイミングで文書が読み込まれていたとしても、次のサイクルまで読み込まれることはなく、その時には doSomething ハンドラーはすでに取り付けられており、発生します。