image_jquery を遅延ロードするための Lazy Load jQuery プラグイン

使用方法
Lazy Load は jQuery に依存します。次のコードをページヘッド領域に追加してください:

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

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

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

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

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

これにより、id="http://www.appelsiini.net/projects/lazyload/img" 領域内の画像が遅延ロードされます。
感度の設定
プラグインには、しきい値 (トリガー読み込みポイントから画像までの距離) を設定することで画像の読み込みを制御できるしきい値オプションが用意されています。デフォルト値は 0 (読み込み時の読み込み) です。

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

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

閾値を 200 に設定し、表示領域は画像から 200 ピクセル離れています (この文の文字通りの意味は私のものと同じです。理解に一貫性がありません。元のテキスト: しきい値を 200 に設定すると、画像が表示される前に 200 ピクセルが読み込まれます。)
プレースホルダー画像
プレースホルダー画像を設定し、読み込みアクションをトリガーするイベントを定義することもできます。この場合、透明なグレーと白の 1x1 ピクセル画像がプラグインに既に含まれています。 >

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

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

イベント
イベントをロードするトリガーには、クリックやマウスオーバーなどの任意の jQuery イベントを使用できます。 Sporty や foobar などのカスタム イベントを使用します。デフォルトでは、ユーザーがウィンドウにスクロールするまで待機状態になります。これを実行すると、グレーのプレースホルダー画像がクリックされます。 >

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

プレースホルダー : "img/grey.gif",

イベント : "click"
});



特殊効果を使用する

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

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

プレースホルダー : "img/grey.gif",

効果 : "fadeIn"
});



コンテナ内の画像

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

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

高さ: 600px;

オーバーフロー: スクロール;


JavaScript コード:

コードをコピーします

コードは次のとおりです: $("img").lazyload({ プレースホルダー : "img /grey.gif",

コンテナ: $("#container")

});


画像が順番に配置されていない場合
ページをスクロールすると、Lazy Load は読み込まれた画像をループし、そのループ内で画像が表示領域内にあるかどうかを確認します。デフォルトでは、最初の画像が検索されます。表示領域にない画像がある場合、ループは停止します。画像は流動的に分散されているとみなされ、ページ内の画像の順序は同じになります。ただし、一部のレイアウトではこの仮定は当てはまりません。ただし、

コピー コード を渡すことができます。 コードは次のとおりです。

$("img") .lazyload({
Failurelimit : 10
}); 🎜>表示領域にない 10 個の画像が見つかった場合にのみプラグインが検索を停止するように、failurelimit を 10 に設定します。
画像の遅延読み込み

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

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

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

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


プラグインのダウンロード
最新バージョン:

ソースコード
, 圧縮コード、パックされたコード既知の問題 Webkit bug #6656 により、Lazy Load は Safari では機能しません。 Chrome では、必要な画像と読み込まれたくない画像がすべてすぐに読み込まれます。 jQuery 1.3.x では、すべての画像が IE で無効になるようです。作者はこの問題の解決に取り組んでいますが、当面はこのプラグインは jQuery 1.2.6 でのみ使用できます。
また、 Mint を使用する場合は、先頭に mint タグを追加してください。ページの最後に mint タグを追加すると、Lazy Load プラグインに干渉します。これは非常にまれな問題です。解決策を見つけた場合は、作者に連絡してください。