【解説】JavaScriptのページ読み込み後の処理一覧【まとめてみた】

【解説】JavaScriptのページ読み込み後の処理一覧【まとめてみた】

JavaScriptのページ読み込み後にする処理方法が主にこちら↓

順に解説してきます。

➀：window.onload

window.onload = function() {
  // 処理
}

「window.onload」は画像やCSSなど、すべてのリソースが読み込まれた後に実行されます。

つまりページ読み込みが完全に終了した後ということ。

1回しか設定できないのが注意点です。
複数あると、最後の処理のみが実行されます。

➁：window.addEventListener(‘load’ ~

window.addEventListener('load', function() {
  // 処理
})

window.addEventListener(‘load’ ~ は、すべてのリソースが読み込まれた後に実行されます。

「window.onload」と同じく、ページ読み込みが完全に終了した後ということ。

ただ「window.onload」と異なり、こちらは複数使用可能です。

複数のイベントハンドラーを設定できるので便利かと。

➂：document.body.onload

document.body.onload = function() {
  // 処理
}

「document.body.onload」はページが読み込まれた後に実行されます。

「window.onload」とほぼ同じですが、こちらは一般的に非推奨らしくあまり使われません。

④：document.addEventListener(‘DOMContentLoaded’ ~

document.addEventListener('DOMContentLoaded', function() {
  // 処理
})

こちらはHTMLのDOMが読み込まれた時点で実行されるのが特徴です。

つまり画像やCSSのリソース読み込みが完了していないときでも発火されます。

onloadよりも早く実行可能。
複数のイベントハンドラーの設定もできます。

【解説】JavaScriptのページ読み込み後の処理一覧【まとめてみた】：まとめ

ジト

JavaScriptのページ読み込み後にする処理を使う時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙