JavaScript - ページが表示されたときに処理を呼び出す

DOMContentLoaded

DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

window.addEventListener('DOMContentLoaded', (event) => {
  console.log("HTML 文書の読み込みと解析が完了しました");
});
DOMContentLoaded イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
9113.19
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

load

load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。

window.addEventListener('load', (event) => {
  console.log("ページが完全に読み込まれました");
});
load イベント

onload イベントハンドラープロパティの場合も上記と同様です。

window.onload = (event) => {
  console.log("ページが完全に読み込まれました");
};
onload イベントハンドラー
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事