jQuery API の load( fn ) は、ロードイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
画像、スクリプト、フレーム、インラインフレームなどのサブ要素を全て読み込んだとき、load( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
「jQuery Version 1.8」の時点で非推奨になった。
記述方法
jQuery( セレクター ) . load( イベンドハンドラ );
「セレクター」の要素のロードイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
実装例（サンプル）について
本来は、300px × 198px の画像だが、152px × 100px で表示している。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( window ) . load( function() {
if( jQuery( 'img.jquery-api-load' ) . height() > 100 ) {
jQuery( 'img.jquery-api-load' ) . addClass( 'jquery-api-load-addClass' );
}
} );
// -->
</script>
<!--
jQuery( window ) . load( function() {
if( jQuery( 'img.jquery-api-load' ) . height() > 100 ) {
jQuery( 'img.jquery-api-load' ) . addClass( 'jquery-api-load-addClass' );
}
} );
// -->
</script>
CSS
<style>
<!--
.jquery-api-load {
border: 1px solid gray;
}
.jquery-api-load-addClass {
height: 100px !important;
}
-->
</style>
<!--
.jquery-api-load {
border: 1px solid gray;
}
.jquery-api-load-addClass {
height: 100px !important;
}
-->
</style>
HTML
<img src="1.jpg" class="jquery-api-load" />
<img src="2.jpg" class="jquery-api-load" />
<img src="3.jpg" class="jquery-api-load" />
<img src="2.jpg" class="jquery-api-load" />
<img src="3.jpg" class="jquery-api-load" />