【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()で 記述すると良さそうです。

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

今まで$(function(){})で記述することが多かったのですが、これを機会に場面によって適した記述を していこうと思います。