jquery.lazyload は画像の遅延読み込みを実装します。

ImageLazyLoad テクノロジーとは
ページ上に多くの画像がある場合、ページを開くと必然的にサーバーとの大量のデータ通信が発生します。特に高解像度の写真の場合、数メガのスペースが必要になります。 ImageLazyLoad テクノロジーは、現在表示されているインターフェイス上の画像は読み込まれますが、非表示のページ (スクロール バーをプルダウンすると表示される) 上の画像は読み込まれないため、必然的に速度の質的向上につながります。

ImageLazyLoad の実装方法

1. JQuery プラグインを使用します。プラグイン名: jquery.lazyload (7kb サイズ)、圧縮 (3kb サイズ)


オンライン圧縮 js http://closure-compiler.appspot.com/home
これは非常に素晴らしい特殊効果ですが、JQuery プラグインを使用するのに必要なコードは数行だけです。使用手順は次のとおりです。

1. JS プラグインのインポート

2. 次の JavaScript をページに追加します:

$("img") .lazyload();

これにより、すべての画像が遅延してロードされます。


もちろん、プラグインには設定すべき設定項目もいくつかあります。

1. しきい値を変更します

$(“img”).lazyload({ しきい値 : 200 });

しきい値を 200 に設定します。は表示されません。到達する前に最初に 200 ピクセルを読み込みます。


2. もちろん、プレースホルダー画像とカスタム イベントを設定して、画像の読み込みイベントをトリガーすることもできます。

コードをコピー コードは次のとおりです:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click "
});

3. 効果パラメーターを定義することで、いくつかの画像表示効果を定義できます

コードをコピー コードは次のとおりです:

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

LazyLoad (遅延読み込み) テクノロジーは、Web ページの画像の読み込みを遅延させるためだけでなく、Google Reader や Bing のデータにも使用されます。画像検索は 🎜>LazyLoad テクノロジーを最大限に活用しています。
1. Ajax テクノロジーと競合します。
2. 非常に高い画像が発生すると、読み込みが停止します。 3. 変則的なコードを書く学生は、理由が何であれ、ページ内の img タグの height 属性が定義されていない場合は、ImageLazyLoad

を使用しないことをお勧めします。タオバオの遅延読み込みテクノロジー: (2kb サイズ)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
呼び出しメソッドも非常に簡単です:
注: このスクリプトは yahoo-dom に依存します -イベントでは、yui 2.x をページにロードする必要があります。次のアドレスを直接引用することもできます:


設定パラメータは次のとおりです:




コードをコピーします

コードは次のとおりです。


手動モードでは、たとえば、SRP ページでは、赤ちゃんリストの最後の 20 枚の画像が遅延してロードされます。 出力時の HTML コードは次のとおりです:

Jquery、Prototype などの JS フレームワークのファンの場合、それらはすべてカスタマイズされた LazyLoad プラグインを提供します。
閲覧可能

http://www.appelsiini.net/projects/lazyload

LazyLoad (遅延読み込み) テクノロジーは、Web ページ内の画像の読み込みを遅らせるために使用されるだけでなく、Google Reader や Bing 画像検索でも

LazyLoad テクノロジー を最大限に活用します。