画像のロード完了イベントを取得してみる実験場。
JavaScriptネイティブな実装
Image() クラスに、イベントハンドラ onload() が用意されているので、これを利用する。
実験ページはコチラ。
<script type="text/javascript">
function cont_loadImage( imageSrc ){
var img = new Image();
img.onload = function(){
alert(
'Image is NOW loaded!'+"\n"
+'Original width: '+this.width+'px'+"\n"
+'Original height: '+this.height+'px'+"\n"
);
var targetBox = document.getElementById('cont_image');
targetBox.innerHTML = '';
targetBox.appendChild(this);
}
img.src = imageSrc;
}
</script>
<ul>
<li><a href="javascript:cont_loadImage('img/sample.gif');">sample.gif をロードしてみる</a></li>
</ul>
<div id="cont_image"></div>
ちなみにだが、documentに配置する前の段階で画像のオリジナルのサイズを取得することができる。
jQueryを使用した実装
jQueryでは、img要素に .load(function) は使えないようなので、.bind('load',function) を使った。
実験ページはコチラ。
<script type="text/javascript" src="/cont.items/lab/themes/webtech/javascript/imageonload/index.items/resources/./jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function cont_loadImage( imageSrc ){
var img = $( new Image() );
img.bind('load', function(){
alert(
'Image is NOW loaded!'+"\n"
+'Original width: '+this.width+'px'+"\n"
+'Original height: '+this.height+'px'+"\n"
);
$('#cont_image').html('').append(this);
} );
img.attr('src',imageSrc);
}
</script>
<ul>
<li><a href="javascript:cont_loadImage('img/sample.gif');">sample.gif をロードしてみる</a></li>
</ul>
<div id="cont_image"></div>
Lazy Load Plugin for jQuery を使用した実装 (しかし失敗)
画像の読み込みを遅延させるjQuery「LazyLoad with jQuery」 | 日刊ウェブログ式 を参考に。Lazy Load Plugin for jQuery のページから入手して実装してみた。
バージョン番号はページ上に明記されていないが、ソースに 1.5.0 であると記載されている。
実験ページはコチラ。
結論を言うと、このプラグインはちゃんと動作する状態にない模様。
スクロールするまで画像を読み込まない（はずの）Lazy Loadについて :: 5509(2011/3/7の記事)で、そもそも、LazyLoad自体にある問題について指摘されている。このページによると、
- <img>タグはdocumentに出力された時点で画像のロードを開始されている。
- よって、onloadイベント発生後にローディング画像に差し替えたところで間に合わない。
- 結果、画面の読み込み時に1回、スクロールしてLazyLoadが走るタイミングで1回で、同じ画像が合計2回読み込まれることになる。
つまり、遅延読み込みというか、読み込み負荷の分散にはなっていないどころか、余計に読み込みが発生するとのこと。意味ない。
IE 6～8, Chrome, Opera 11.50 では一応遅延ロードされたような演出はされるものの、 Firefox 3.6.X では、画像が表示されなかった。何かと問題がありそうなので、使用は現実的でないと思われる。(2011/10/26 現在)