JavaScriptのページ読み込み後に実行する処理

JavaScriptとjQueryで違う

JavascriptとjQueryで書き方が異なります。JavaScriptは画像や動画などページのデータを全て読み込み完了時(load)に実行するのに対し、jQueryの場合は、DOMの読み込み完了時間(ready)に実行されます。 JQueryを使っているサイトでは、複数回記述できるメリットを考えると、「$(document).ready」を使った方がいいかもしれません。

JavaScriptの場合

ページの他のデータ(画像など)を読み込み完了時(load)に実行。

二度実行すると、行数が後の方のみ実行されます。

以下の場合、「さようなら!」のみ表示。

load時に読み込ませるjQueryの書き方

jQueryの場合

ページの他のデータ(画像など)を読み込み完了前、DOMを読み込み時(ready)に実行。

二度実行すると、両方実行されます。

省略形

追記

以下のページでさらに詳しく読み取り順序を説明してくれています。 https://qiita.com/mimoe/items/74cb3a01a30162759fdd