jQueryプラグイン:Image lazy loader画像遅延ロード

住所:http://www.cnblogs.com/cnfiowen/archive/2010/02/22/1671483.html
 
 
Lazy LoadはJavaScriptで作成したjQueryプラグインです.長いページの画像をロードするのを遅延できます.ブラウザの可視領域外の画像はロードされません.ユーザがページをその場所にスクロールするまでは、画像のプリロードの処理とは正反対です.
多くの大きな画像を含む長いページで画像の読み込みを遅延すると、ページの読み込み速度が速くなります.ブラウザは、可視画像をロードした後にレディ状態になります.場合によっては、サーバーの負担を減らすのにも役立ちます.


Lazy LoadはMatt Mlinacから作られたYUI ImageLoaderツールボックスです.これはプレゼンテーションページ.
どう使いますか
Lazy LoadはjQueryに依存しています.次のコードをページhead領域に追加してください.

1

2

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

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

そして、あなたの実行コードに下記の文を入れます.

1

$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

これはid="を使用しますhttp://www.appelsiini.net/projects/lazyload/img」エリアの画像の読み込みが遅延されます.
感度を設定
プラグインは、thresholdオプションを提供しており、臨界値を設定することにより、ピクチャのロードを制御することができます.デフォルト値は0です.

1

$("http://www.appelsiini.net/projects/lazyload/img").lazyload({ threshold : 200 });

臨界値を200として、視認領域を画像から200個の画素がある時に画像をロードし始めます.(この文の意味は本人の理解と一致しません.原文:Setting threshed to 200 causes image to load 200 pixels before it is visible.)
ビットマップ
また、ビットマップを設定し、イベントを定義してロード動作を開始することもできます.ビットマップにURLアドレスを設定します.透明、灰色、白の1つが必要です.×1ピクセルの画像は既にプラグインに含まれています.

1

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

イベントトリガーローディング
イベントは、任意のjQuery時間とすることができます.例えば、clickとmouseover.ユーザーがウィンドウ上の画像の位置にスクロールするまで、ユーザー定義のイベントを使用してもいいです.たとえば、sportyとfoobar.デフォルトでは、ユーザーが画面のロードを停止する前に、灰色のビット画像をクリックしてください.

1

2

3

4

$("img").lazyload({

	placeholder : "img/grey.gif",

	event : "click"

});

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

1

2

3

4

$("img").lazyload({

	placeholder : "img/grey.gif",

	effect : "fadeIn"

});

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

1

2

3

4

#container {

	height: 600px;

	overflow: scroll;

}

JavaScriptコード:

1

2

3

4

$("img").lazyload({

	 placeholder : "img/grey.gif",

	 container: $("#container")

});

画像が順番に並べられていないとき
ページをスクロールするときは、Lazy Loadはロードされた画像にループします.ループ中に画像が視認領域内にあるかどうかを検出します.デフォルトでは、最初の非可視領域の画像を見つけた時にループを停止します.画像はストリーミング分布とみなされます.ページ内の画像の順序はHTMLコードと同じです.しかし、いくつかのレイアウトでは、このような仮定は成り立たないが、failurelimitオプションによってローディング挙動を制御することができる.

1

2

3

$("img").lazyload({

	failurelimit : 10

});

failurelimitを10に設定して、プラグインに10個の見えない領域の画像を見つけさせます.検索を停止します.もし、下品なレイアウトがあれば、このパラメータを少し高く設定してください.
画像の読み込み遅延
Lazy Loadプラグインの不完全な機能ですが、これは画像の遅延負荷を実現するためにも使用されます.下のコードはページの読み込みが完了したら再読み込みします.ページの読み込みが完了してから5秒後に指定エリア内の画像が自動的にロードされます.これはプレゼンテーションページの読み込み遅延です.

1

2

3

4

5

6

7

8

9

$(function() {

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

		placeholder : "img/grey.gif",

		event : "sporty"

	});

});

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

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

});

プラグインをダウンロード
最新バージョン:ソースコード、圧縮コード、パッケージコード
既知の問題
webkitのbug ヽoo。ツのため、Lazy LoadはSafariとChromeの中では使えません.すぐにあなたの希望と不本意を全部ロードします.
jQuery 1.3.xはプラグインをIEの中で失効させたようです.すべての画像はバックグラウンドにロードされます.たとえそれらがロードされるべきではないとしても、作者はこの問題を解決するために努力しています.その間はjQuery 1.2.6に滞在してプラグインを使用するしかないです.
また、ベントを使用すると、ミニタグをページの先頭に追加してください.ミニタグをページの最後に加えるとLazy Loadプラグインに邪魔になります.
 
翻訳元:http://www.appelsiini.net/projects/lazyload