jqueryプラグインlazyload.js遅延ロードピクチャの使用方法

ウェブページが長くて、多くの画像があると、画像をダウンロードするのに時間がかかります。ウェブページ全体のロード速度に影響します。この遅延はプラグインをロードして、あなたのスクロール状況を通じて、見たい画像をロードします。そして、バックグラウンドから画像をダウンロードしてください。最後に表示されます。このプラグインにより、画像を表示する必要がある時に画像をダウンロードすることができ、サーバーの圧力を軽減し、ページのロード速度を向上させることができます。
Lazy Loadプラグインの原理
対象となる要素のsrc属性を変更すると、orgial属性となり、ピクチャのロードを中断する。スクロール状態を検出し、ウェブページの視認領域の中のSrc属性を復元して画像をロードすることで、バッファローディングの効果が得られます。コードの導入方法:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
    $(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "images/grey.gif", //          
         effect      : "fadeIn" //         (  )
    });
    });
</script>

しかし、多くのJavascript大牛は、このプラグインは実際には緩負荷の役割を果たしていないと分析しています。確かにそうです。公式にも説明と解決方法があります。
実は新しいバージョンのブラウザで、JavascriptコントロールのSrc属性を削除しても、ブラウザはこの画像をロードします。
じゃ、私達はどう解決しますか？実は簡単です。HTMLの構造を直接修正して、Src属性の値を占有画像に指し、data-original属性を追加して、本当の画像アドレスを指すようにします。たとえば:

<img src="img/grey.gif" data-original="img/example.jpg" >

もちろん、上のコードの中ではページ内のすべての画像をロードするのが遅くなりましたが、一部の画像はこのように望んでいません。
ロードされたメールの下の画像だけをバッファリングします。

$(".main img").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

マウントされたlazyタイプの画像を読み込みます。

$("img.lazy").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

他はこの類推で、セレクタの調整を適当にすればいいです。
lazyload.js高級使用方法：
下の部分は公式文書から来て、公式文書を簡単に翻訳しました。
より周到なやり方
私たちはこのような問題を考えなければならない。このような構造を定義したら、ウェブページにソース画像をロードしません。Javascriptが実行されてこそ、このソース画像が表示されます。ユーザのブラウザがサポートされていないか、またはユーザがJavascriptをサポートするオプションをオフにしたら、私たちのこの画像は表示されません。つまり、Javascriptのサポートがないと、私たちの画像が表示されません。
この問題に対して、私たちはノートタグを導入する必要があります。大体の考えは次の通りです。noscriptで本当の画像位置を含んでいます。ブラウザがJavascriptをサポートしない時、直接に画像を表示します。

<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>

既存の画像に対して、隠し処理を行い、ショー（）方法を用いて表示をトリガする。

.lazy {
  display: none;
}

このように、ブラウザがJavascriptをサポートしていないと、私達がカスタマイズした[img]は表示されません。noscriptの中の画像を表示します。具体的な実現コードは以下の通りです。

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

事前読み込み
デフォルトの場合は、画像の位置にスクロールするとプラグインがロードされます。このようにして、ユーザはまず空白の画像を見てから、再びゆっくりと現れるかもしれない。ユーザーがスクロールする前にこの画像をロードしたいなら、パラメータを設定してもいいです。

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

このパラメータは、事前にロードするために使用されます。上の文の意味は、画像まであと200ピクセルあると、画像をロードし始めるということです。
カスタムトリガイベント
デフォルトのトリガイベントはスクロールです。スクロールするとチェックしてロードします。イベントのプロパティを使用して、自分のロードイベントを設定してください。その後、イベントを起動する条件をカスタマイズして、画像をロードしてください。

$("img.lazy").lazyload({
    event : "click"
});

カスタム表示効果
デフォルトの画像の効果は、効果がないので、ダウンロードが完了したら、そのまま表示されます。このようなユーザ体験は良くないです。effect属性を設定して、画像の表示効果を制御できます。例えば

$("img.lazy").lazyload({
    effect : "fadeIn"
});

fadeInの効果は、画像の透明度を変えて、漸近的に現れます。
画像をある容器に挿入します。
皆さんはスマートフォンを使うと、よくアプリをダウンロードします。彼らは横の容器を使って携帯のスクリーンショットを入れます。container属性を使用すると、簡単に容器にバッファロードができます。まず、cssでこの容器を定義してから、このプラグインを使ってロードします。

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
    container: $("#container")
});

表示されない画像をロード
一部の画像は見えないです。私たちはdisplay:noneに似ています。などの属性の画像を表示します。デフォルトでは、このプラグインは非表示の画像をロードしません。もし私たちが目に見えない画像をロードする必要があるなら、私たちはsky_を必要とします。invisibleはfalseに設定されています。コードは以下の通りです。
はい、これはlazyload.jsというプラグインの簡単な紹介です。