Lazy Load Plugin for jQueryを導入してみた。

 Lazy Load Plugin for jQuery

 最近なんだか前にも増して写真とかの画像をぺたぺた貼るようになったので一気に読み込ませるとうざいかなぁと思って、とりあえずダミーの単色イメージを置いておいて画面上に表示されるようになったら読み込んで置き換えるというjQueryのPluginを導入してみましたよ。

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. Demo page is available.

 と言うことで、元ネタはYUI系なんですね。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/{ 任意のパス }/jquery.lazyload.mini.js"></script>

 などと呼び出しておきまして適当なタイミングで(所謂onloadイベント時とか)、


$('img').lazyload({
    placeholder : "{ 任意のパス }/grey.gif",
    effect : "fadeIn",
    threshold : 200
});

 と実行すれば! スクロールして表示されるタイミングでもわっと現れたりしてきて素敵。

 ちなみに、

Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!

 というアナウンスがされておりまして、一部のブラウザでは上手く動かないみたいです。とりあえずiPad上のSafariとかで表示されないのを確認したので、


navigator.userAgent.indexOf('Mobile') != -1

 と適当に判定して実行させないようにしてます。

 ボクに力があったらささっとデバッグしてちょちょいと報告して貢献できるのになぁ。