裏紙に書く程度の内容

jQuery HTMLが読み込まれてから処理を行う

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

HTMLが読み込まれてから処理を行いましょう

についてです。

何を言ってるの?

元記事、ちょっと何が言いたいのかわかりません。

説明を読むと、「同じような構成の要素がたくさんある場合はHTMLを直接書くんじゃなくて、jQueryで後からHTMLを書くといいよ。」といいたいようにも思えます。

が、それだとタイトルの「HTMLが読み込まれてから処理を行いましょう」とはかなりずれている気もします。

また、サンプルコードも結構雑。

よくわからないので、こいつは読み飛ばそう・・・。

ready()load()の違い

これだけじゃ内容が薄すぎるのでready()load()の違いを・・・。

タイミングの違い

ready()

ready()の方のリファレンスを見ると、

Specify a function to execute when the DOM is fully loaded.

となっています。
意味としては「DOMが完全にロードされた時に実行する関数を指定します」

“完全にロードされた時”って訳になりますが、あくまでも”DOMが”ということです。

その為、画像のサイズを取得しようとしたりするとうまくいきません。

画像ファイルがロードされる前に動く為、imgWidth,imgHeight0になってしまいます。

load()

一方、load()リファレンスを見ると、

Bind an event handler to the “load” JavaScript event.

「loadイベントにイベントハンドラをバインドします」って書いてあります。
つまり、これはイベントのバインドなわけで、よく使う$(window).load();

windowオブジェクトのloadイベントに処理をバインドしているということになります。

また、loadイベントの発火タイミングについてはリファレンスに

The load event is sent to an element when it and all sub-elements have been completely loaded.
This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

「すべてのサブ要素が完全にロードされた時、ロードイベントが要素に送られます。このイベントはimages,scripts,frames,iframes及びwindowオブジェクトの、URLと関連付けられた全ての要素に送ることが出来ます」とあります。

訳がちょっと怪しいですが、要は<img>のような要素も含めてロードされた時、ってことです。

使い方の違い

コードで見た方がわかりやすいかもしれません。

ある<img>のサイズを取得したいとき、

以下はNG

$(document).ready(function() {
    var imgWidth = $('#image').width();
    var imgHeight = $('#image').height();
});

以下はOK

$(window).load(function() {
    var imgWidth = $('#image').width();
    var imgHeight = $('#image').height();
});

但し、このサンプルコードはちょっと横着したやり方。取得したい画像が1個だけならば、リファレンスの説明を見る限り

$('#image').load(function() {
    var imgWidth = $(this).width();
    var imgHeight = $(this).height();
});

の方が正しいはずです。

$(window).load()とするのはやりたいことが他要素のロード状況に影響がある場合ですね。

また、loadはイベントなので以下のように書き直せます。

$('#image').on('load', function() {
    var imgWidth = $(this).width();
    var imgHeight = $(this).height();
});

こうするとイメージ的にもready()との違いははっきりわかりますね。

結論

Tips自体は内容が不明なのでパス。

load(),ready()の違いはきちんと理解しておこう。

Index