JavaScriptでページスクロール画像読み込みを実装（遅延読み込み効果を模倣）_JavaScriptスキル

なぜこの記事を書くのか?
1. ページを最適化するための非常に実用的な方法であり、技術的な実装は難しくありません。
2. 関連するコンテンツを含む記事を検索すると、すべて jQuery が使用されているようですが、Web マスターが使用している場合は、 jQuery を使用しないでください。この方法はありますか?
3. テクノロジーを共有することは、プロジェクトで実際に使用したことがないため、より多くの人にテストしてもらうためでもあります。質問がある場合は、事前に指摘してください。
4. 今月のブログはまだ書いていません。
5. 仕事のタスクがありません。 . 今書かなければ、いつ待つことになるでしょう...

現在のページのほとんどには、豊富なコンテンツと多くの写真が含まれています。頻繁に閲覧する (私はオンライン ショッピングが大好きなので、1 か月間オンラインでお金を使わないと不満に感じます)、数十枚の写真が含まれるページは drizzle と呼ばれます。そのため、現在人気の方法はローリング ダイナミック ローディングです。この方法では、まず、ページがスクロールして対応する位置までスクロールするまで待機してから、Web ページをロードします。読み込みが速くなります（リクエストが少なく、読み込みが少ない場合は、それについて言及しないのはなぜですか？） 『ハイパフォーマンス Web サイト構築ガイド』の最初の章では、HTTP リクエストを削減することの重要性について述べました。これは、Web ページのフロントエンドのパフォーマンスを向上させ、ページの読み込み速度を最適化するための非常に実用的な方法です。

原則:
1. スクロール イベントをページにバインドします。
2. ページの読み込み時に実際の画像アドレスを決定します。要素が現在のブラウザ ウィンドウに入るかどうか。
4. もちろん、何をロードするか、どのようなユーザー エクスペリエンスを使用するかはあなた次第です。

🎜> ブラウザの互換性は DOM 標準と IE 標準に日々対応しています。次のコードを考えてみましょう。
1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
目的: ウィンドウ表示領域の左上隅を基準とした現在のページの Y 位置を取得します。 .
DOM標準:window.pageYOffset;
IE標準: window.document.documentElement.scrollTop
2.window.innerHeight: document.documentElement.clientHeight
目的: 高さを宣言します。ウィンドウのドキュメント表示領域と幅 (ピクセル単位)。
DOM 標準: innerheight および innerwidth;
IE 標準: document.documentElement または ducument.body の clientWidth および clientHeight プロパティ (DTD に関連)代替
3.obj.getBoundingClientRect ().top window.document.documentElement.scrollTop window.document.body.scrollTop
目的:
ブラウザが非ブラウザの場合。 -webkit カーネル、 document.body.scrollTop 値は常に 0 です。正しい値を取得するには document.documentElement.scrollTop を使用します。
ブラウザが Webkit コアの場合、 document.documentElement.scrollTop 値は常に 0 です。 document.documentElement.scrollTop 値は常に 0 です。 .body;
DTD に関連するステートメントも検索しました (つまり、ページで DOCTYPE が指定されている場合は document.documentElement を使用し、ページで DOCTYPE が指定されていない場合は document.body を使用してください)。詳しい友人が指摘してくれると思います、ありがとうございます。
詳細:
1. 実際のアドレスは最初は特定の属性にあるため (デフォルトは xsrc で、自分で設定できます)、デフォルトの画像アドレスは 1 ピクセルの透明な画像が最適です。ブラウザーでのエラーを回避します (例では反映されています)
3. 画像が正常に読み込まれた後、適切な表示効果を追加できます (例では反映されていません。自分で試してください)。 >JavaScript のソース コードは次のとおりです:



コードをコピー

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

varscrollLoad = (関数 (オプション) {
vardefaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc'、時間: options.time ||300};
var Camelize = function (s) {
return s.replace(/-(w)/g, function (strMatch, p1) {
return p1.toUpperCase();
};
this.getStyle = function (要素, プロパティ) {
if (arguments.length != 2) return
var value = element.style[camelize(property)];
if (!value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle (要素、null);
値 = css.getPropertyValue(プロパティ) :
} else if (element.currentStyle) {
値 = element.currentStyle(プロパティ); 🎜>}
}
戻り値 == 'auto' ? '' : 値;
var _init = function () {
var offsetPage = window.pageYOffset ? pageYOffset : window.document.documentElement.scrollTop、
offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight)、
docImg = document.images、
_len = docImg.length ;
if (!_len) が false を返す;
for (var i = 0; i <_len i>var attrSrc = docImg[i].getAttribute(defaults.src)、
o = docImg[i]、タグ = o。ノード名.toLowerCase();
if (o) {
postPage = o.getBoundingClientRect().top window.document.documentElement.scrollTop window.document.body.scrollTop; postWindow = postPage Number(this.getStyle(o, 'height').replace('px', ''));
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
if (tag === "img" && attrSrc !== null) {
o.setAttribute("src", attrSrc);
}
o = null;
}
}
};
window.onscroll = function () {
setTimeout(function () {
_init();
},defaults.time);
}
};
return _init();
});
scrollLoad();

代打次のように:
scrollLoad({ src:'userSrc'， //文字串型 time: 100 //数字型 }) デモダウンロード