画面スクロールに合わせてコンテンツを読み込む「jquery.lazyload.js」について。

画面の外にある画像データは読み込まずに、スクロールで表示エリアに来たときに読み込みのタイミングを持ってくる「jquery.lazyload.js（Ajax Lazyload）」。

結構画像をたくさん使ってるページ何かに使うと、ページの読み込みが早くなるので重宝します。

…が、バージョンアップしたのを知らずに、まだ古いバージョンを使っている人がいますね。


これ、古いバージョンを使ってると、読み込みのリクエストを２回してしまうのであまり（というか全然）意味がないわけですが、未だに使ってる人がいるんですよね…。

いままでは、こんな感じでよかったわけです。

<script type="text/javascript">
$(function() {
    $("img").lazyload(
        placeholder : "loading.gif",
        effect : "fadeIn"
    );
});
</script>

スクロールがそのイメージの場所に来るまでは、「loading.gif」を表示しておいて、イメージがブラウザの表示域に入ったら、<img>タグのsrc=""の中のデータと差し替える…ってやつです。


でも、最近のブラウザはイメージを読み込みに行っちゃうんですよね…orz


作者もそこんところに気がついたみたいで、新しいバージョンに変わってます。

最新バージョンでの記述はこう。

▼設定
$("img.lazy").lazyload(
    //200px先読み
    threshold : 200,
    //エフェクト
    effect : "fadeIn"
);

▼imgタグ
<img class="lazy" src="loading.gif" data-original="img/example.jpg"  width="640" heigh="480">

「data-original」にオリジナルの画像データを入れといて、「src」の中にはロードちう…の画像を入れときます。


最新版のコードを見たわけではないのですが、多分表示領域にタグが入ったら「$('img').attr('data-original')」でデータを取得して差し替える…という処理を行なっているものと思われます。


PC向けのページなんかではあまり使わなくてもいいプラグインかもしれないけど、スマホ向けページでは使いたいプラグインですね。


ちなみに、リストをフィルタリングするjQueryプラグイン「mobilyselect」と一緒に使う場合には「mobilyselect」のコールバックオプションにlazyload()の設定をしてあげてください。

scriptタグの設定
▼
$(function(){

$('#selecter').mobilyselect({
    collection: 'all',
    animation: 'fade',//アニメーション（plain, fade, absolute）
    duration: 300,     //速度
    
    //配置が終了したらjQuery-lazyloadを呼び出す
    onComplete: function(){
        $("img.lazy").show().lazyload();	    
    }
});

});

▼HTML
><img class="lazy" src="loading.gif" data-original="img/example.jpg"  width="640" heigh="480">

そのほかの詳しい使い方は、公式のドキュメントを見ることをオススメします。
　　▼
Lazy Load Plugin for jQuery


jQueryのプラグインに関しては、面白い動作のプラグインを使っているな…と思ったら、そのページのソースを覗いて、プラグインの名前を調べて公式ドキュメントを読む…という方法をとったほうがいいと思います。

結構ブログなんかで紹介されているわけですが、やっぱ公式ドキュメントが一番詳しいので。

僕のブログも参考までにしておいてくださいね。