これにより、ページの読み込み時間が短縮され、サーバーへの負荷が軽減されます。JavaScript のソース コードを調べたところ、Lazyload が記述されていることがわかりました。Baidu で検索したところ、この効果を実現する jquery プラグインが見つかりました。良いプラグイン。
たとえば、比較的大きい、または長い Web ページを開いた場合、遅延読み込みによって最初に表示される領域に画像が読み込まれ、スクロールするとそこに画像が読み込まれます。
あなたが写真 Web サイトで、1 ページに多数の写真をロードする必要がある場合、このプラグインは非常に良い選択です。
使用方法は、次の js を引用します。
ソース コードの表示、ヘルプの表示
次の JavaScript をページに追加します:
ソース コードの表示 ヘルプ 1 $("img").lazyload() ;
これにより、すべての画像が遅延してロードされます。プラグインには、設定するいくつかの構成項目もあります。
もちろん、一部のユーザーにとって、上記の機能は要件を満たしていない場合があります。感度の設定方法を見てみましょう。この機能を制御するためのしきい値を設定できるため、より使いやすくなります。
$(“img”).lazyload({ 閾値 : 200 });
閾値を 200 に設定します。これは、画像が表示される前に 200 ピクセルをロードすることを意味します。もちろん、プレースホルダー画像とカスタム イベントを設定して画像読み込みイベントをトリガーすることもできます
ソース コードの印刷ヘルプを表示
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
効果パラメータを定義することでいくつかの画像表示効果を定義することもできます
ソース コードの印刷ヘルプを表示
$("img").lazyload({
placeholder : "img/grey.gif",
エフェクト: "フェードイン"
});
ダウンロード アドレス:
ソース、
縮小化または
梱包済み