jQueryのlazyload遅延読み込みの詳しい説明

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

多くの大きな画像を含む長いページで画像を遅延読み込みすると、表示されている画像を読み込んだ後、ページの読み込みが高速化される場合があります。

デモ面:

基本选项

淡入效果

对不支持JavaScript浏览器的降级处理

水平滚動

容器内水平滚動

容器内垂直滚動

页面内保存 5 秒後に画像を読み込みます遅延

AJAX を使用して画像を読み込みます

Lazy Load の使用方法は、HTML の最後、つまり に追加してください。画像のタグを変更する必要があります。画像のアドレスはデータオリジナル属性に配置する必要があります。遅延読み込みイメージに特定のクラスを与えます (例:遅延)。このようにして、画像プラグインのバンドルを簡単に行うことができます。コードは次のとおりです:

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

デモ: 基本オプション

ヒント: 画像の幅と高さをここで設定する必要があります。プラグインが正しく動作しない可能性があります。

臨界点を設定します

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

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
 $("img.lazy").lazyload();
});

読み込みをトリガーするイベントを設定します

クリックやマウスオーバーなどの jQuery イベントを使用できます。 Sporty や foobar などのカスタム イベントを使用することもできます。デフォルトでは、ユーザーが下にスクロールして画像がビューポートに表示されるまで待機します。ユーザーが画像をクリックしたときにのみ画像が読み込まれます:

$("img.lazy").lazyload({
 threshold : 200
});

デモ: 5 秒の遅延後に画像を読み込みます

特殊効果を使用します

デフォルトでは、プラグインは画像が完全に読み込まれるのを待って show を呼び出します()。必要なエフェクトを使用できます。以下のコードでは、fadeIn (フェードイン効果) を使用しています。

デモ: フェードイン効果

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

JavaScript が有効になっていない状況の場合

JavaScript は、ほとんどすべてのブラウザーで有効になっていますが、JavaScript をサポートしていないクライアントでも実際の画像を表示したい場合があります。ブラウザーが JavaScript をサポートしていない場合に正常に機能を低下させるには、実際の画像フラグメントを

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

コンテナ内の画像

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

デモ: 内部の水平スクロール。コンテナ、コンテナ内の垂直スクロール

画像が不連続な場合

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

プラグインをダウンロード

最新バージョンのソース コードと圧縮コードは、OSX 上の Safari 5.1、Safari 6、Chrome 20、Firefox 12 ブラウザ、Windows 上の Chrome 20、IE 8 および IE 9 ブラウザ、および iOS5 (iPhone およびiPad) Safari 5.1 ブラウザでテストしました。

jQuery の遅延ロードおよび遅延読み込み関連記事の詳細な説明については、PHP 中国語 Web サイトに注目してください。