jquery plug-in_jqueryを使用した画像遅延読み込み技術の詳細説明

ここでは、画像の遅延読み込みを実装し、Web サイトを開く速度を向上させるために、jquery 画像遅延読み込みプラグイン jquery.lazyload を使用することをお勧めします。ダウンロード アドレス: http://www.appelsiini。 .net/download/jquery.lazyload.js

1. クイック使用章
1. JS プラグインのインポート

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

2.あなたのページ:

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

これにより、すべての画像が遅延してロードされます。
2. 上級章の詳細な紹介 (直接バイパスできることはあまり知りたくない)
Lazy Load は JavaScript で書かれた jQuery プラグインで、画像の読み込みを遅延させることができます。長いページでは、ブラウザの表示領域外の画像は、ユーザーがページをスクロールするまで読み込まれません。これは、大きな画像が多数ある長いページでの画像の事前読み込みの処理方法とは逆です。場合によっては、Lazy Load は Matt Mlinac によって作成された YUI ImageLoader ツールボックスからインスピレーションを得たものです。
使用方法
Lazy Load は jQuery に依存します。

コードをコピーしてください。 🎜> コードは次のとおりです。

そして、次のステートメントを実行コードに追加します:

コードをコピーします

コードは次のとおりです: $("#xd").lazyload();

これにより、id="xd" 領域の下の画像が遅延ロードされます。
Set Sensitive
プラグインには、しきい値オプションが用意されており、これを設定することで画像の読み込みを制御できます。しきい値 (読み込みがトリガーされる場所から画像までの距離)。デフォルト値は 0 (画像の境界に達したときに読み込まれます)。 200 });

しきい値を 200 に設定し、可視領域が画像から 200 ピクセル離れた時点で画像の読み込みを開始します (この文の文字通りの意味は私の理解と一致しません。原文: しきい値の設定) 200 にすると、画像は表示される前に 200 ピクセル読み込まれます。)
プレースホルダー画像
また、プレースホルダー画像を設定し、読み込みアクションをトリガーするイベントを定義することもできます。この時点で、URL アドレスを設定する必要があります。プレースホルダー画像。透明、グレー、白の 1×1 ピクセル画像は、プラグインにすでに含まれています。




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

$("img").lazyload({ placeholder : "img/grey.gif" }); イベント トリガーによる読み込みイベントは任意ですクリックやマウスオーバーなどの jQuery イベント。スポーティーや foobar などのカスタム イベントも使用できます。デフォルトでは、ユーザーがウィンドウ上の画像の位置までスクロールするまで待機状態になります。プレースホルダー 画像がクリックされる前に読み込まれないようにするには、次のようにします。

コードをコピー

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

$("img").lazyload({ プレースホルダー : "img/grey.gif", イベント : "クリック" }); 🎜> 特殊効果を使用する画像が完全にロードされると、プラグインはデフォルトで show() メソッドを使用して画像を表示します。実際、処理したい特殊効果を使用できます。次のコードは FadeIn エフェクトを使用します。これはデモ ページです。

コードをコピーします。

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

$("img").lazyload({
プレースホルダー : "img/grey.gif",
効果 : "fadeIn"
});
画像はコンテナ内にあります
スクロール バーのある DIV 要素など、スクロール可能なコンテナ内の画像に対してプラグインを使用できます。コンテナを jQuery オブジェクトとして定義して渡すだけです。初期化メソッドのパラメータです。これは、水平スクロールのデモ ページと垂直スクロールのデモ ページです。
#container { height: 600px;overflow:scroll; 🎜>

コードをコピー コードは次のとおりです。 $("img").lazyload({

placeholder : "img/grey.gif ",

container: $("#container")
});


画像が順番に並んでいない場合
ページがスクロールされると、Lazy Load はロードされた画像を循環します。画像がループ内の表示領域内にあるかどうかを確認します。デフォルトでは、表示領域にない最初の画像が見つかったときにループが停止します。ページ内の画像の順序と HTML コード内の順序は同じであると考えられますが、一部のレイアウトではこの仮定は当てはまりません。ただし、読み込み動作は を介し​​て制御できます。

コードをコピーします コードは次のとおりです: $("img") .lazyload({

failurelimit : 10

});


Set Failurelimit to 10 プラグインは、検索を停止する前に、表示領域にない 10 個の画像を検索します。レイアウトが面倒な場合は、このパラメータを高く設定してください。
画像の遅延読み込み

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

コピーcode コードは次のとおりです。 $(function() {

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

プレースホルダー : "img/grey.gif",
イベント : "スポーティ"
})
});
$(window ).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")},
});