要素のloadイベントにバインドします。また、loadイベントを実行します。

• .load( handler(eventObject) ) 1.0追加
• .load( [eventData], handler(eventObject) ) 1.4.3追加
• サンプル

このメソッドは、.bind('load', handler)へのショートカットです。

loadは対象の要素とその下位の要素が完全にロードされた際にイベントが通知されます。 このイベントの通知は、URLに関連付けられる要素(images, scripts, frames, iframes, window)に対して行われます。

.load( handler(eventObject) ) 1.0追加

戻り値:jQuery

引数	説明
handler(eventObject)	イベントが発生した際に、実行したい処理を関数として指定します。

.load( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

引数	説明
[eventData]	マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject)	イベントが発生した際に、実行したい処理を関数として指定します。

サンプル

<img src="book.png" alt="Book" id="book" />

$('#book').load(function() {
  // id:bookが読み込まれた際に実行したい処理
});

また、image要素にloadを使用する際は下記の点に注意する必要があります。

• 各ブラウザで確実に動作するとは限りません。
• WebKitで事前に同じsrcの画像が読み込まれて居た場合、正確にイベント発火が行われません。
• DOMツリーのバブルアップが正確に行われません。
• 既にブラウザキャッシュに画像が存在した場合、イベントの発火が行われないかもしれません。

.live()と.delegate()はiframeのloadイベントを検出するのに使用することはできません。 loadイベントの親Documentに対してのバブルアップが正確ではなく、またイベントの委任に必要な event.targetがFirefox,IE9,Chromeではセットされないためです。

画像を含み、ページが完全にロードされた際に処理を実行します。

$(window).load(function () {
  // ページロード後に実行したい処理
});

userIconクラスの各画像が読み込まれた際に、その画像の高さが100pxより大きければ bigImgクラスを追加します。

$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});

 Back to top