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>

これにより、lazy クラスを持つすべての画像が遅延ロードされます。

デモ: 基本オプション

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

臨界点を設定します

デフォルトでは、画像が画面に表示されるときにロードされます。事前に画像をロードしたい場合は、しきい値を 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 をサポートしていない場合に正常に機能を低下させるには、実際の画像フラグメントを

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

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

コンテナ内の画像

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

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

画像が不連続な場合

ページをスクロールすると、Lazy Load はロードされた画像をループします。デフォルトでは、画像が表示領域内にあるかどうかを確認します。表示領域にない最初の画像が見つかったときのループ。画像は流動的に配布されると見なされ、ページ内の画像の順序は HTML コード内の順序と同じになります。ただし、failurelimit オプションを使用して読み込み動作を制御できます。これにより、プラグインは 10 個の画像が見つかった場合にのみ検索を停止します。レイアウトがひどい場合は、このパラメータを高く設定してください。

隠し画像を読み込みます

たとえば、プラグインが使用されている場合、ページに多くの隠し画像が埋め込まれている可能性があります。リストをフィルターするには、リスト内の各項目の表示ステータスを継続的に変更できます。パフォーマンスを向上させるために、Lazy Load はデフォルトで非表示の画像を無視します。非表示の画像を読み込む場合は、skip_invisible を false

$("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 サイトに注目してください。