ホームページ >ウェブフロントエンド >jsチュートリアル >jquery プラグインは画像の遅延読み込み効果を実装します code_jquery

jquery プラグインは画像の遅延読み込み効果を実装します code_jquery

WBOY
WBOYオリジナル
2016-05-16 18:35:13983ブラウズ

これにより、ページの読み込み時間が短縮され、サーバーへの負荷が軽減されます。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",
エフェクト: "フェードイン"
});

ダウンロード アドレス: ソース縮小化または 梱包済み
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。