Lazy Load jQuery プラグイン、images_jquery の遅延読み込みに関する中国語の使用法ドキュメント

LazyLoad テクノロジーとは何ですか?

ページ上に多くの写真がある場合、ページを開くと必然的にサーバーとの大量のデータ通信が発生します。特に高解像度の画像の場合、数百 K のスペースを占有します。 Lazy Load は JavaScript で書かれた jQuery プラグインで、長いページの画像の読み込みを遅らせることができます。これは、ユーザーがページをスクロールするまで画像が読み込まれません。まったく逆の方法で処理されます。
多くの大きな画像を含む長いページで画像を遅延読み込みすると、表示可能な画像を読み込んだ後にブラウザが準備完了状態になるため、場合によってはサーバーの負荷が軽減され、定性的な問題が発生する可能性があります。速度の向上。
互換性: ie6/7/8、firefox 3.5.5、opera 10.10、safari 4.0.4、chrome 3.0 safari および chrome の一部の機能はサポートされていません。

Lazy Load は、Matt Mlinac が作成した YUI ImageLoader ツールボックスからインスピレーションを得たものです。これはデモ ページです。

原文へのリンクは次のとおりです: http://www.appelsiini.net/projects/lazyload


Lazy Load の現在のバージョンは 1.8 です.1

ダウンロード アドレス: http://www.jb51.net/jiaoben/63757.html

インスタンス ダウンロード:

ダウンロード ステートメント:
1. 注: このコードは学習とコミュニケーションのみを目的としており、商業目的で使用しないでください。
2. 注: このコードは学習とコミュニケーションのみを目的としており、商業目的には使用しないでください。
ファイル情報: ファイル名: Lazy Load 遅延読み込みイメージの例
ファイルハッシュ: dd3e435124e377c2da33344d442f85d1
ファイルサイズ: 1.1 MB
ファイルアップロード日: 2012 年 3 月 25 日
ファイル更新日: 3 月 25 、2012
ファイルの説明: ページ上に多くの写真がある場合、ページを開くと必然的にサーバーとの大量のデータ通信が発生します。特に高解像度の画像の場合、数百 K のスペースを占有します。 Lazy Load は JavaScript で書かれた jQuery プラグインで、長いページの画像の読み込みを遅らせることができます。これは、ユーザーがページをスクロールするまで画像が読み込まれません。まったく逆の方法で処理されます。

使用方法について説明しましょう。

Lazy Load は jQuery に依存します。

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

Lazy Load の使い方 方法は非常にシンプルですが、新しいバージョンではいくつかの調整が加えられており、 タグの属性を変更する必要があります。
タグ内の src 属性を待機中の画像の URL に変更し、
に実際の画像の URL を入力します。

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

提案: src の待機画像には 1 ピクセルのモノクロ画像を使用するのが最適です。 。
JS コードは次のとおりです:

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

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

このようにして、Lazy Load の効果を実現できます。

デモを見た後は、効果がないと感じますか?この問題については後で説明します。

実際には、画像の URL を保存するために、data-original 属性を使用する必要はありません。他の属性には次のように自分自身の名前を付けます:
JS コードは次のとおりです:

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

$("img.lazy").lazyload({ data_attribute : "attr" }) ;



data_attribute 属性を対応する名前に設定するだけです (注: HTML コードでは大文字と小文字が区別されません。そのため、「data-」の後には小文字または数字のみを指定できます)。

ブラウザの場合JavaScript をサポートしていない場合は、対応するダウングレード処理が必要です。

は、スクリプトが実行されないときに代替のコンテンツ/テキストを定義するために使用されます。利点は、検索エンジン クローラーが JavaScript スクリプトを処理しないため、

コードのコンテンツを直接キャプチャできることです。 > コードは次のとおりです:

>

CSS スタイル設定:

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

.lazy {

表示:
}

JS コード:

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

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

画像の読み込み応答距離を設定します
Lazy Load プラグインのデフォルト設定は次のとおりです。ただし、しきい値の値を設定すると、画像がブラウザ ウィンドウに表示されると読み込みがトリガーされます。

コードをコピー コードは次のとおりです。 : $("img.lazy").lazyload({ しきい値 : 200 });

さらに、しきい値は正または負の値になります。値が 200 であると仮定すると、画像が画面に表示されるまで 200 ピクセル離れたときにロードが開始されます。値が -200 の場合はその逆になります。画像がウィンドウに表示され、読み込みが開始される前にブラウザ ウィンドウの下部からの距離は 200px です。

追記: 画像と画面の間の距離は画像の上部の位置に基づいて計算されます。
注: しきい値の設定は、Web サイトの長さと画像の高さを考慮する必要があります。値が大きすぎると、読み込めない問題が発生します。値の設定は半分を超えないようにすることをお勧めします。

イベントによる読み込みのトリガー
jQuery によって定義されたイベントを通じて読み込みをトリガーすることも、独自のイベントを使用することもできます。 >

コードをコピー


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

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

アニメーション効果を実現

上記のデモに画像読み込みの効果がないのは、Lazy Load のデフォルトの画像読み込みが表示されるためです。 jQuery の show() メソッドを使用すると、画像がほぼ即座に表示されます。もちろん、他の効果も実現できます。

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


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

effect : "fadeIn" }); 🎜>slideDown() メソッドを使用することもできますが、効果はあまり良くありません。アニメーションの速度を制御したい場合は、effectspeed 属性を変更することもできます。 🎜>

コードをコピーします

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

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

effectspeed 属性はデフォルトでは空なので、設定しない場合はアニメーション時間がコンテナのコンテナ属性遅延ロードする画像がすべてコンテナに配置されている場合、コンテナの属性を css コードに指定します。 🎜>

コードをコピー


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

#container {
height : 600px;
オーバーフロー: スクロール;


js コード:

コードをコピーします🎜> コードは次のとおりです。

$("img.lazy").lazyload({
コンテナ: $("# コンテナ")
});



早速、垂直デモだけでなく水平デモも見てみましょう。

failure_limit の属性
Lazy Load には、HTML に従ってループするメカニズムがあります。ドキュメントのレイアウトは上から下に検索され、表示/ロードされていない最初の画像が見つかると、検索は停止します (実際には、オブジェクト (グループ) $("img. Lazy") )

この Failure_limit 属性は何に使用されますか?

現在、Web サイトを設計する際には、float やposition などの多数の配置スタイルが使用されています。ブラウザで表示されるレイアウト効果は、HTML ドキュメント内の DOM 順序とは大きく異なります。
画面上に タグが表示されているため、表示できません。実際には HTML ドキュメント内で、まだ表示されていない タグの後ろに位置が配置されるため、Lazy Load が対応する画像をロードできなくなります。最初の非表示の

を使用できます。 コードをコピーします コードは次のとおりです:

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

failure_limit : 10
});


このように、Lazy Load は、表示されていない 10 番目の タグを見つけます。画像が多く、レイアウトが複雑な場合、

が非常に便利です。元のテキストには、次のような注意事項もあります。ファンキーなレイアウトの場合は、この数値を高い値に設定してください。Web サイトのレイアウトが非常に「異常」である場合は、

のダウンロードの遅延を大きく調整することをお勧めします。画像
カスタム イベントを使用できます。次に、setTimeout を通じてイベントをトリガーする遅延を設定します。

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

$( function() {

$("img:below-the-fold").lazyload({
event : "sporty"
} );
});

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


主な原則は、イベントがスクロール以外のイベントに設定されている場合、実際には名前が示すように、このイベントは画像を表示するために使用されます (実際、scroll もこのイベントを呼び出します)

skip_invisible は非表示の画像を読み込みます。
Lazy Load プラグイン。 in はデフォルトでは非表示のイメージをロードしません (たとえば、display:none)。これにより、非表示のイメージを一緒にロードする場合は、skip_invisible を false に設定できます。 >

コードをコピーします

コードは次のとおりです: $("img.lazy").lazyload({ skip_invisible : false });