jquery に基づく遅延ローダー プラグインは、画像の遅延読み込みを実装します [簡単な使用]_jquery

画像の遅延読み込みは、jquery の遅延ローダー プラグインを使用して実現できます。Web ページが比較的長い場合、ユーザー ウィンドウ内の画像のみが最初に読み込まれ、ウィンドウの外側の画像はドラッグするまで読み込まれません。画像が多すぎて読み込みが遅くなるデメリットを回避するのに効果的です。

遅延ローダー プラグインの使用は非常に簡単で、ページに遅延ローダー プラグインを導入し、ページ上の画像に対して遅延読み込みメソッドを呼び出すだけです。遅延ローダー プラグインのダウンロード アドレス: http://www.appelsiini.net/projects/lazyload。具体的な使用法を見てみましょう:

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

Jquery。 LazyLoad.js プラグインパラメータの詳細説明:


1、画像を使用して事前にプレースホルダを配置します
プレースホルダ: "img/grey.gif"、
パラメータ: プレースホルダ、値は特定のピクチャ パスです。このピクチャは、ロードされる画像の位置を占めるために使用されます。画像がロードされると、プレースホルダ画像が非表示になります

2、ロードに使用する効果
effect: "fadeIn"、
パラメータ:effect(特殊効果)、値にはshow(直接表示)、fadeIn(フェードイン)、slideDown(プルダウン)などが含まれます。よく使用されるfadeIn

3、事前に読み込みを開始します
しきい値: 200、
パラメータ: しきい値、値はページの高さを表す数値です 200 に設定すると、スクロール バーが画像の読み込みを開始することを意味します。ターゲット位置からまだ 200 メートル離れている場合、ユーザーは回避できます。

4、イベントがトリガーされたとき
イベント: "クリック"、
パラメーター: イベント、値をロードします。クリック (クリック)、マウスオーバー (マウスオーバー)、スポーティー (スポーティー)、foobar (...) です。画像上でマウスオーバーまたはクリックすると、読み込みが開始されたばかりです。最後の 2 つの値は、テストされていません...

5、特定のコンテナ内の画像の効果を実現するため、
コンテナ: $("#container")、
パラメータ: コンテナ、値は特定ですContainer.lazyload は、ブラウザのスクロール バーが引っ張られたときにデフォルトで有効になります。このパラメータを使用すると、画像の並べ替えが混乱しているときに、DIV

6 のスクロール バーを引っ張ったときに、DIV 内の画像を順番にロードできます。 🎜>failurelimit: 10、
パラメータ: Failurelimit、値は数値です。デフォルトでは、lazyload は表示領域にない最初の画像を見つけた場合にはロードを続行しませんが、HTML コンテナが混乱している場合は、表示領域内の画像はロードされない可能性があります。この問題を回避するために、failurelimit は表示領域外の N 枚の画像をロードすることを目的としています。