jqueryプラグインlazyload.jsを使用してimages_jqueryの読み込みを遅らせる方法-jsチュートリアル-php.cn

jqueryプラグインlazyload.jsを使用してimages_jqueryの読み込みを遅らせる方法

WBOY

リリース： 2016-05-16 16:59:28

オリジナル

1789 人が閲覧しました

Web ページが非常に長く、多くの写真がある場合、写真のダウンロードに時間がかかり、Web ページ全体の読み込み速度に影響します。この遅延読み込みプラグインは、表示する必要があるものを読み込みます。スクロールすると、背景から画像をダウンロードするよう要求され、最終的に表示されます。このプラグインを使用すると、表示する必要がある場合にのみ画像をダウンロードできるため、サーバーの負荷が軽減され、ページの読み込み速度が向上します。

Lazy Load プラグインの原理

対象の img 要素の src 属性を元の属性に変更して、画像の読み込みを中断します。スクロール状態を検出し、Web ページの表示領域にある img の src 属性を復元してから画像をロードすることで、バッファリングされたロード効果が作成されます。コード導入方法：

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

しかし現在、多くの Javascript 専門家は、このプラグインが実際には読み込み速度を遅くする役割を果たしていないと分析しています。これは実際に事実であり、公式の指示と解決策が提供されています。

実際、その理由は、ブラウザの新しいバージョンでは、JavaScript によって制御される src 属性を削除しても、ブラウザは引き続き画像をロードするためです。

では、どうやって解決すればいいのでしょうか？実際、これは非常に簡単です。HTML の構造を直接変更し、img タグに新しい属性を追加し、src 属性の値をプレースホルダー画像にポイントし、ポイントする data-original 属性を追加するだけです。実際のイメージアドレス。例:

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

もちろん、上記のコードでは、ページ内のすべての画像を遅延ロードしますが、画像によっては遅延ロードを望まないため、これを望まない場合もあります。そのため、次のようにするだけです:

たとえば、ロードクラス main の下で画像のみをバッファリングします

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

$(".main img")。 Lazyload({ 
 プレースホルダー : "images/grey.gif",
 効果 : "fadeIn"
});

遅延クラスでマウントされたイメージをロードします:

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

$("img.lazy")。 Lazyload({ 
 プレースホルダー : "images/grey.gif",
 効果 : "fadeIn"
});

残りも同様に推測できます。セレクターを適切に調整するだけです。

lazyload.js の高度な使用法:

以下の部分は公式文書から引用したもので、公式文書の簡易翻訳です。

より思慮深いアプローチ

私たちはこの問題について考えなければなりません。このような構造を定義したので、ソース画像は Web ページにロードされません。このソース画像はJavaScript実行時のみ表示されます。ユーザーのブラウザがそれをサポートしていない場合、またはユーザーが Javascript をサポートするオプションをオフにしている場合、画像は表示されません。つまり、JavaScript がサポートされていないと、画像を表示できません。

この問題に対処するには、noscript タグを導入する必要があります。一般的な考え方は次のとおりです。noscript を使用して実際の画像の場所を含め、ブラウザが Javascript をサポートしていない場合は、画像を直接表示します。

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

< ;noscript>

既存の画像の場合は、処理を非表示にし、show() メソッドを使用して表示をトリガーします。

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

.lazy {
 表示: なし;
}

このように、ブラウザが Javascript をサポートしていない場合、カスタマイズされた画像は表示されませんが、noscript の画像は表示されます。具体的な実装コードは次のとおりです:

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

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

先にロードしてください

デフォルトの状況では、画像の位置までスクロールすると、プラグインの読み込みが開始されます。このようにして、ユーザーは最初に空白の画像を見て、その後ゆっくりと表示することができます。ユーザーがスクロールする前にこの画像を事前にロードしたい場合は、パラメータを設定できます。

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

$("img.lazy")。 Lazyload({ 
 しきい値 : 200
});

threshold このパラメータは事前にロードするために使用されます。上記のステートメントの意味は、画像からまだ 200 ピクセル離れているときに、画像の読み込みを開始するということです。

カスタマイズされたトリガーイベント

デフォルトのトリガーイベントはスクロールです。スクロールするとチェックされてロードされます。イベント属性を使用して独自の読み込みイベントを設定し、このイベントをトリガーする条件をカスタマイズして画像を読み込むことができます。

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

$("img.lazy")。 Lazyload({ 
 イベント: "クリック"
});

カスタマイズされた表示効果

デフォルトの画像実装効果は、ダウンロード完了後、直接表示されます。この種のユーザーエクスペリエンスは良くありません。エフェクト属性を設定して、画像の表示効果を制御できます。たとえば

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

$("img.lazy")。 Lazyload({ 
 効果: "フェードイン"
});

フェードインの効果は、画像の透明度を変更し、色あせて表示することです。

画像をコンテナに挿入します

スマートフォンを使用している場合、アプリケーションをダウンロードするためにアプリケーション Web サイトにアクセスすることがよくあります。通常、携帯電話のスクリーンショットを保存するために水平コンテナが使用されます。コンテナ属性を使用すると、バッファロードをコンテナに簡単に実装できます。まず、このコンテナを CSS で定義し、それからこのプラグインでロードする必要があります。

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

#container { height: 600px;スクロール; } 
$("img.lazy").lazyload({
 コンテナ: $("#container")
});

非表示の画像をロード

一部の画像は表示されないため、display:none; などの属性を持つ画像を追加します。デフォルトでは、このプラグインは非表示の非表示画像をロードしません。非表示の画像をロードするためにこれを使用する必要がある場合は、skip_invisible を false に設定する必要があります。コードは次のとおりです:

$("img.lazy").lazyload({ Skip_invisible : false});

これは、lazyload.js プラグインの簡単な紹介です。