デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.load( )読込が完了した時の処理を設定

構文

読込が完了した時の処理を設定返値:jQueryオブジェクト
jQo.load( function )ver1.0〜
jQo.load( object, function )ver1.4.3〜
※v1.8で非推奨となりました

機能

jQueryオブジェクトで指定した要素に含まれるすべての要素の読込が完了した時に引数のfunctionを実行します。ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

本家のページでは、loadイベントについてたくさんの注意が記載されています。簡単にまとめると「画像の読み込みについてのloadイベントは、ブラウザによっては正しく機能しないから気を付けて」という感じです。
そのためloadメソッドは非推奨となっています。→参考:本家ページの非推奨(deprecated)カテゴリ

解説

読込が完了した時に実行する処理を設定

サンプル(load/01.html)を開くと1MBくらいの画像が表示されます。そして画像の読み込みが完了するとページの最上部に「画像の読み込みが完了しました」と表示します。

body内にimg要素(1MBくらいの画像)とp要素があることを確認してください。jQueryは以下の様に記述され、loadメソッドの引数にfunctionの「loadFunc」が設定されています。画像の読み込みを確認するので、セレクタにはimgが設定されています。

$(function () {
	$("img").load(loadFunc);
});

loadメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そして読込が完了したら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

loadに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 読込が完了したら実行したい処理
}

サンプルload/01.htmlで利用したloadFuncは以下の様になっており、textメソッドを利用してp要素に「画像の読み込みが完了しました」と表示します。

function loadFunc(eo) {
	$("p").text("画像の読み込みが完了しました");
};
結果として、画像の読み込みが完了するとp要素に「画像の読み込みが完了しました」と表示します。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(load/01b.html

$("img").load(function (eo) {
	$("p").text("画像の読み込みが完了しました");
});

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(load/02.html)を開いてbody内の構成はload/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、loadメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。受け取った値はtextメソッドを利用してp要素に表示します。

$("img").load({test:10}, function (eo) {
	$("p").text("eo.data.test = " + eo.data.test);
});

結果として、画像の読み込みが完了すると第1引数で渡されたtestプロパティの値「10」がp要素に表示されます。

関連項目

xmlデータなどを読み込むloadメソッドも同じ綴りです。構文が異なるので混同することはないでしょう。
似たような機能のイベントでreadyメソッドがありますが、こちらはDOMの読込だけを確認します(つまり画像などのサブ要素の読込に完了には関与しません)。

メモ

ページ全体に対しても利用可能

セレクタにwindowを設定すれば、ページ全体のすべてのデータ読込が完了したときの処理を設定できます。
→本家サイト:load()のページ最下段

$(window).load(function () {
	//実行したい処理
});