回転:jQuery.Lazyloadの使用方法の詳細

Lazy LoadはJavaScriptで作成されたjQueryプラグインです.長いページの画像のロードを遅らせることができます.ブラウザの表示領域外の画像は、ユーザがページをスクロールするまでロードされない.これは、ピクチャのプリロードの処理方式とは正反対である.
多くの大きなピクチャを含む長いページにおいて、ピクチャのロードを遅延することで、ページのロード速度を速めることができる.ブラウザは、表示画像をロードすると準備完了状態になる.場合によってはサーバの負担を軽減することもできる.
どのように使いますか.
Lazy LoadはjQueryに依存する.次のコードをページheadに追加してください.

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

HTMLコードを変更する必要があります.srcの属性には、1 x 1画素の灰色GIFピクチャを用いるdemoページのパビリオンピクチャが設定.また、実画像のURLをdata-originalの属性に設定必要がある.ここで、特定のclassを定義して、遅延ロードが必要なピクチャオブジェクトを得ることができる.この方法でプラグインのバインドを簡単に制御することができます.

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

画像を処理するコードは以下の通りである.

$("img.lazy").lazyload();

これにより、classがlazyであるすべてのピクチャが遅延ロードされる.基本オプションdemo参照
感度の設定
ほとんどのブラウザのJavaScriptがアクティブです.しかし、JavaScriptをサポートしていないクライアントで実際の画像を表示することを望んでいるかもしれません.ブラウザがJavaScriptをサポートしていないときに優雅に降格すると、実際の画像のクリップを<noscript>のラベルに書くことができます.

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

<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

CSSでプレースホルダを隠すことができる.

.lazy {

  display: none;

}

JavaScriptをサポートするブラウザでは、プラグインの初期化と同時に完了するDOM readyにプレースホルダを表示する必要があります.

$("img.lazy").show().lazyload();

これらはオプションですが、プラグインをスムーズに降格させるには、これらを行う必要があります.
感度の設定
デフォルトでは画面に画像が表示されるときにロードされます.画像を事前にロードする場合は、thresholdのオプションを設定し、thresholdを200に設定して、画面200の画素から事前にロードすることができます.

$("img.lazy").lazyload({ threshold : 200 });

占拠画像
また、デューティピクチャを設定してイベントを定義してロード動作をトリガーすることもできます.この場合、占有画像にURLアドレスを設定必要がある.透明、グレー、白の1 x 1画素の画像がプラグインに含まれています.
イベントトリガロード
イベントは、例えば、clickおよびmouseoverのような任意のjQuery時間であることができる.sportyやfoobarなどのカスタムイベントも使用できます.ユーザがウィンドウ上の画像の位置までスクロールするまで、デフォルトでは待機状態となる.灰色の占有画像がクリックされる前に画像のロードを阻止するには、次のようにします.

$("img").lazyload({

	placeholder : "img/grey.gif",

	event : "click"

});

特効の使用
画像が完全にロードされると、プラグインはデフォルトでshow()の方法で図を表示する.あなたが使いたい特効を使って処理することができます以下のコードはFadeInの効果を用いる.これは効果プレゼンテーションページです.

$("img.lazy").lazyload({ 

    effect : "fadeIn"

});

画像は容器の中にあります
スクロール可能な容器の画像、例えばスクロールバー付きDIV要素にプラグインを使用することができます.コンテナをjQueryオブジェクトとして定義し、パラメータとして初期化方法に渡すだけです.これはプレゼンテーションページを水平にスクロールと垂直スクロールのプレゼンテーションページである.

#container {

    height: 600px;

    overflow: scroll;

}

$("img.lazy").lazyload({         

     container: $("#container")

});

画像が順番に並べられていない場合
ページをスクロールすると、Lazy Loadはロードされた画像にループします.ループ中に画像が可視領域内にあるか否かを検出する.デフォルトでは、表示領域にない最初のピクチャが見つかったときにループを停止する.画像はフロー分布と考える、ページ内の画像の順序とHTMLコード内の画像の順序は同じである.しかし、いくつかのレイアウトでは、このような仮定は成立しない.ただし、failurelimitオプションでロード動作を制御できます.

$("img.lazy").lazyload({ 

    failure_limit : 10

});

failurelimitを10とすることにより、表示領域にない10個の画像がプラグインに見つかるようにして検索を停止する.わいせつなレイアウトがある場合は、このパラメータを少し高くしてください.
画像のロードを遅らせる
Lazy Loadプラグインの不完全な機能ですが、画像の遅延ロードを実現するためにも使用できます.以下のコードは、ページのロードが完了する後の再ロードを実現する.ページのロードが完了する5秒後、指定領域内の画像が自動的にロードされます.これはデモページの遅延ロードです.

$(function() {          

    $("img:below-the-fold").lazyload({

        event : "sporty"

    });

});

$(window).bind("load", function() { 

    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);

});

非表示の画像をロード
あなたのページには隠れた画像がたくさん埋め込まれているかもしれません.例えば、プラグインはリストのフィルタリングに用いられ、リスト内の各項目の表示状態を絶えず変更することができる.パフォーマンスを向上させるために、Lazy Loadはデフォルトで非表示の画像を無視した.隠し画像をロードする場合は、skip_invisibleをfalseに設定します.

$("img.lazy").lazyload({ 

    skip_invisible : false

});

プラグインのダウンロード
最新バージョンソースコードおよび圧縮コード.プラグインはすでにOSXのSafari 5.1,Safari 6,Chrome 20,Firefox 12ブラウザ,WindowsのChrome 20,IE 8 and IE 9ブラウザ,iOS 5(iPhoneとiPad)のSafari 5.1ブラウザでテストされている.