【jQuery】$(document).ready() と $(window).load()｜スニペット活用でコピペプログラミング

Jquery 読み込みのタイミング

jQueryを使用していて$(function(){ });で囲ってプログラムを書いていたのですがなぜかうまく動作してくれない。

解決方法を調べてみました。

読み込みタイミングによってうまく動作してくれない

調べてみるとjQueryの読み込みタイミングによってうまくプログラムしてくれないようです。

htmlに対してjQueryを当てることが多いと思いますが、プログラムを当てているhtmlタグが読み込まれる前にjQueryが読み込まれてしまうと動作しなくなってしまいます。

サイト表示が軽ければ問題は無いのですが、サイズの大きい画像を使用していたりでローディングに時間がかかる際はjQueryの読み込みタイミングを操作する必要があります。

$(document).ready() と $(window).load()

$(document).ready()

$(document).ready(function() {
  // ここに関数内容を記述
});

よく使用している$(function(){ });は$(document).ready()と同様。

$(document).ready()はDOMが構築されてから実行されます。
つまり、jQueryのファイルが読み込まれたらhtmlとは関係なく動作します。

$(window).load()

$(window).load(function() {
  // ここに関数内容を記述
});

一方、$(window).load()はページが完全に読み込みをしてから実行されます。
$(window).load()で記述していればhtmlタグを完全に読み込んでからの実行になるので画像の高さを取得して何かをする時などのコンテンツの情報を取得して引き回す際には$(window).load()で記述すると良さそうです。