Web フロントエンドの最適化スクロール遅延読み込み画像 example_jquery

読み込みが遅いのはなぜですか?ページが読み込まれるときにすべての画像を表示するほうがよいでしょうか?これは必要ですか?答えは「はい」です。読み込む画像やコンテンツが多い場合、一度に読み込むとページ全体の読み込みに時間がかかり、ユーザーの待ち時間が長くなり、使い勝手が良くありません。また、なぜ単にページングを作成しないのかと疑問に思うかもしれません。実際、このスクロール遅延読み込み技術は、まさに次のページを手動でクリックする代わりに使用されるページング技術です。ページを変更するたびにユーザーは 1 回クリックする必要があり、これもユーザーにとって不親切です。そのため、ローリング遅延読み込みが発生します。

ここでは、Baidu Pictures と同様に、画像を読み込む例を示します。下にスクロールすると、次のページに画像が表示され続けます。

要件は次のとおりです。たとえば、ページがロードされた後、最初に 5 枚の画像をロードします (5 枚の画像がブラウザ ウィンドウの高さいっぱいに収まる場合)。バーがブラウザの一番下までスクロールし、さらに 5 枚の画像をロードし、合計 4 回ロードします。

原理は、まず現在のブラウザのウィンドウの高さ a を取得し、スクロール バーがスクロールするときに、それより小さい場合、まず 20 枚の画像が読み込まれたと判断します。画像が 20 枚未満の場合、現在のドキュメントの上からの高さ b と画像コンテンツの高さ c を取得します。a b>=c の場合は、5 枚の画像の読み込みを続けます。

困っている人々にいくつかの強力な機能を示すために、できる限り少ないコードとできるだけシンプルなデモを使用するのが好きだと言いました。なぜなら、すべての原則は実際には非常にシンプルであり、デモがシンプルであればあるほど、それが簡単になるからです。人々はそれを理解し、受け入れます。コードは非常に少ないので、 コードを直接入力します。

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

<メタhttp-equiv="Content-Type" content="text/html; charset=utf-8" />



< ;script type="text/javascript">
var n = 0;
var winHeight = $(window).height();
$(function () {
loadimg();
$(window).scroll(function () {
if (n var docTop = $(document).scrollTop();
var contentHeight = $("# content").height();
if (docTop winHeight >= contentHeight - 10) {
loadimg();
}
}
});
});
functionloadimg() {
for (i = 0;私は＜ 5; i ) {
$("#content").append("

");
}
n = 5;
}

ここでは、コードを簡略化するために jqury フレームワークが使用されています。この関数を実装するには、純粋な js コードを手動で記述できれば最適です。この小さな関数には、任意の js フレームワークの使用。しかし、結局のところ、私は個人的には jquery フレームワークを好みます。大規模なプロジェクトでは、純粋な js コードを手書きすると、プロジェクト全体の進行が大幅に遅くなります。それでも、適切に使用すれば開発効率が向上します。大規模なプロジェクトの場合 プロジェクトでは、jquery はこの小さな機能を実現するだけでなく、Ajax と同様にそれを簡単に実現するのにも役立ちます。さらに、ここではこの画像の読み込みをコーディングしただけです。実際には、Ajax を使用して新しい画像をリクエストし、それをページに読み込む必要があるため、バックグラウンド ロジックは必要ありません。なので、この画像だけを読み込みます。

次のコードに気づくかもしれません: docTop winHeight >= contentHeight - 10、なぜここで -10 が必要なのでしょうか? -10 でない場合、IE と Firefox ではテストは合格しますが、Chrome では機能しません。これは、Chrome では docTop winHeight が常に contentHeight より 1 小さいのに対し、最初の 2 つのブラウザでは docTop winHeight が contentHeight より小さいためです。 contentHeight が 1 大きくなります。これはブラウザの問題です。最も簡単な方法は、下から 10 ピクセルまでスクロールしないことです。

ソース エンジニアリング コードが必要ですか?