JavaScript はページスクロール画像の読み込みを実装します

なぜこの記事を書くのか？

1. ページを最適化するための非常に実用的な方法であり、技術的な実装は難しくありません。

2. 関連するコンテンツを含む記事を検索したところ、すべて jQuery メソッドを使用しているようですが、ウェブマスターが使用する場合jQuery を使用しないで、このメソッドを使用できないのですか? え?;

3. テクノロジーを共有すると、プロジェクトで実際に使用したことがなく、自分で考え出しただけなので、より多くの人がテストを支援することもできます。ご質問がございましたら、ご指摘ください。よろしくお願いします;

4. 今月のブログはまだ書いていません

5. 書かないと仕事がありません。さあ、いつ待てばいいですか...

今日のページのほとんどは同じ特徴を持っています - 豊富なコンテンツと比較的小さい画像。私たちがよく閲覧する Taobao、JD.com、共同購入 Web サイトなど、たくさんあります。私はオンライン ショッピングが大好きで、1 か月間オンラインでお金を使わないと不快に感じます)。そのため、数十枚の写真が含まれるページは、現在人気があります。この方法では、大部分の HTTP リクエストを解決できます。まず、ページがスクロールして対応する位置までスクロールするまで待機してから、Web ページを読み込みます。読み込みが速くなります（リクエストが少なく、読み込みが少ない場合は、すぐに言及しないのはなぜですか？） 『ハイパフォーマンス Web サイト構築ガイド』の最初の章では、HTTP リクエストを削減することの重要性について述べました。これは、Web ページのフロントエンドのパフォーマンスを向上させ、ページの読み込み速度を最適化するための非常に実用的な方法です。

原則:

1. スクロール イベントをページにバインドします。

2. ページをロードするときに、実際の画像アドレスを特定の属性に配置します。

3. 次に、要素がスクロールプロセス 現在のブラウザウィンドウに入ります

4. 最後に画像をロードします。もちろん、何をロードするか、どのユーザーエクスペリエンスを使用するかはあなた次第です

難易度:

ブラウザの互換性が原因です。 DOM 標準と IE 標準の難しさ、フロントエンドの仕事はそれらに毎日取り組んでいます。次のコードについて考えてみましょう

1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

目的: ウィンドウ表示領域の左上隅を基準とした現在のページの Y 位置を取得します。

DOM 標準: window.pageYOffset;

IE 標準: window.document.documentElement.scrollTop

2.window.innerHeight ? window.innerHeight: document.documentElement.clientHeight

目的: ウィンドウの高さと幅を宣言します。ドキュメント表示領域 (ピクセル単位)

DOM 標準: innerheight および innerwidth;

IE 標準: 代替として document.documentElement または document.body の clientWidth および clientHeight プロパティ

3.obj.getBoundingClientRect() .top + documentlement.scrolltop.document.body.documentelement.scrolltop-を使用して、ブラウザーがWebkitである場合カーネルの場合、Document.documentedLement.scrolltop の値は定数 0 であり、Document.body が使用されます。ページで DOCTYPE が指定されていない場合は、document.body を使用します。知っている友人が指摘できるようにしてください。終わりました、ありがとうございました。

詳細:

1. 実際のアドレスは最初は特定の属性にあるため (デフォルトは xsrc で、自分で設定できます)、デフォルトの画像アドレスは 1 ピクセルの透明な画像が最適です。ブラウザでのエラーを回避します 赤 ；

3. 画像が正常に読み込まれたら、適切な表示効果を追加できます (例には反映されていません。自分で試してみてください) ------- ------------------- ------------------------------- ------------------- ------------------------------- ------------------- ------------------------------- ------------------- ------------

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

varscrollLoad = (function (options ) {

var デフォルト = (arguments.length == 0) ? { src: 'xSrc'、時間: 300} : { src: options.src || 時間: options.time ||300};

var Camelize = 関数 {

return s.replace(/-(w)/g, function (strMatch, p1) {

return p1.toUpperCase();

});

};

this.getStyle = function (要素, プロパティ) {

if (arguments.length != 2) return false;

var value = element.style[camelize(property)];

if (!value) if (document.defaultView && document.defaultView .getComputedStyle) {

var css = document.defaultView.getComputedStyle(element, null);

value = css ? css.getPropertyValue(property) : null;

} else if (element.currentStyle) {

value = element.currentStyle[camelize(property)];

}

}

戻り値 == 'auto' ? '' : value;

};

var _init = function () {

var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,

offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),

docImg = document.images,

_len = docImg.length ;

if (!_len) return false;

for (var i = 0; i

var attrSrc = docImg[i].getAttribute(defaults.src),

o = docImg [i]、tag = o.nodeName.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 offsetPage) && postWindow

if (tag === "img" && attrSrc !== null) {

o.setAttribute("src", attrSrc) );

}

o = null;

}

}

};

Window.onscroll = Function () {

settimeout (function () {

}、defaults.time)};

Return _init (); ;

デモダウンロード

は、SRCの元のアドレスと応答時間を設定するパラメータを渡すことができます

scrollLoad({

src:'userSrc', //String型

time: 100 / /Number type

})