jQuery 遅延読み込み画像プラグイン Lazy Load 使用ガイド_jquery

Lazy Load は JavaScript で書かれた jQuery プラグインで、長いページ内の画像の読み込みを遅らせることができます。ユーザーがページをスクロールするまで、画像は読み込まれません。画像のプリロードの処理方法とは逆です。

多くの大きな画像を含む長いページで画像を遅延ロードすると、表示可能な画像をロードした後にブラウザが準備完了状態になるため、場合によってはサーバーの負荷も軽減されます。

使い方は?

Lazy Load は jQuery に依存します。次のコードをページの先頭領域に追加してください:

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

デモページでは、src属性にブースシンボル画像を設定し、実際の画像のURLをdata-original属性に設定する必要があります。ここでは、遅延ロードする必要がある画像オブジェクトを取得するための特定のクラスを定義できます。これにより、プラグイン バインディングを簡単に制御できます。

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

画像を処理するコードは次のとおりです。

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

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

これにより、lazy クラスを持つすべての画像が遅延してロードされます。基本的なオプションのデモを参照してください。

感度を設定する

JavaScript はほとんどすべてのブラウザで有効になっていますが、ブラウザが JavaScript をサポートしていない場合でも、実際の画像を正常に表示するには、実際の画像フラグメント

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

プレースホルダーは CSS 経由で非表示にすることができます。

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

.lazy {
表示: なし;
}

JavaScript をサポートするブラウザでは、DOM の準備ができたらプレースホルダーを表示する必要があります。これはプラグインの初期化と同時に実行できます。

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

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

これらはオプションですが、プラグインをスムーズにダウングレードしたい場合は実行する必要があります。

デフォルトでは、画像が画面に表示されるときにロードされます。事前に画像をロードしたい場合は、しきい値オプションを 200 に設定して、200 のときに画像を事前にロードすることができます。画面からピクセル離れています

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

$("img.lazy").lazyload({ しきい値 : 200 });

プレースホルダー画像

プレースホルダー画像を設定し、読み込みアクションをトリガーするイベントを定義することもできます。このとき、透明、グレー、白の 1×1 ピクセル画像が既に含まれています。プラグイン内部。

イベントトリガーによるロード

イベントには、クリックやマウスオーバーなどの任意の jQuery イベントを使用できます。また、スポーティーや foobar などのカスタム イベントも使用できます。デフォルトでは、ユーザーが の位置までスクロールするまで待機状態になります。ウィンドウ上の画像はグレーで表示されます。クリックされるまでプレースホルダー画像が読み込まれないようにするには、次のようにします。

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

$("img").lazyload({
プレースホルダー: "img/grey.gif",
イベント: 「クリック」
});

特殊効果を使用する

画像が完全にロードされると、プラグインはデフォルトで show() メソッドを使用して画像を表示します。実際、次のコードでは FadeIn エフェクトを使用します。効果デモページです

。

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

$("img.lazy").lazyload({
効果:「フェードイン」
});

写真はコンテナの中です

スクロール バーのある DIV 要素など、スクロール可能なコンテナー内の画像でプラグインを使用できます。必要なのは、コンテナーを jQuery オブジェクトとして定義し、それをパラメーターとして初期化メソッドに渡すことだけです。水平スクロールのデモ ページと垂直スクロールのデモ ページ。

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

#container {
高さ: 600px;
オーバーフロー: スクロール;
}
$("img.lazy").lazyload({
コンテナ: $("#container")
});

写真の順番が整わない場合

ページをスクロールすると、Lazy Load はロードされた画像をループし、その画像が表示領域内にあるかどうかを検出します。デフォルトでは、最初の画像が表示領域内にないときにループが停止します。画像は流動的に分散されていると見なされ、ページ内の画像の順序は HTML コード内の順序と同じですが、一部のレイアウトではこの仮定は当てはまりません。ただし、読み込み動作を制御できます。失敗制限オプション

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

$("img.lazy").lazyload({
失敗制限 : 10
});

表示領域にない 10 個の画像を見つけた後にプラグインが検索を停止するように、failurelimit を 10 に設定します。レイアウトが煩わしい場合は、このパラメータを高く設定してください。

画像の遅延読み込み

Lazy Load プラグインの不完全な機能ですが、画像の遅延読み込みを実装するために使用することもできます。次のコードは、ページが読み込まれてから 5 秒後に画像を読み込みます。指定した領域が自動的にロードされます。これは遅延ロードのデモページです。

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

$(function() { $("img:below-the-fold").lazyload({
イベント: 「スポーティ」
}); }); $(ウィンドウ).bind("ロード", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);

隠し画像の読み込み

たとえば、プラグインを使用してリストをフィルタリングする場合、パフォーマンスを向上させるために、リスト内の各項目の表示ステータスを継続的に変更できます。デフォルトでは、ロードは非表示の画像を無視します。非表示の画像をロードしたい場合は、skip_invisible を false

に設定してください。

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

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

Skip_invisible : false
});

The above is the entire content of this article, I hope you all like it.

Please take a moment to share the article with your friends or leave a comment. We will sincerely thank you for your support!