JS で非ファーストスクリーン画像の遅延読み込みを実装する方法

ここで、JS を使用してファーストスクリーン以外の画像の読み込みを遅らせる例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

目標

リソースの読み込みを減らすと、ページの読み込み速度を明らかに最適化できるため、ページの読み込み時にすぐにダウンロードされる画像の数を減らしてページの読み込み速度を向上させることができます。また、ページの読み込み速度を向上させるために、他の画像も読み込まれるようになります。必要な負荷。

考え方

上記の目標を達成したい場合は、考慮する必要があることがいくつかあります。

1. どの画像をすぐにロードする必要があり、どの画像を後でロードできるかを判断する方法は?

2. 指定した時間に画像を読み込むように制御するにはどうすればよいですか?

最初の質問では、ページを開いたときにユーザーに表示される写真はすぐにロードされる必要があり、他の質問は遅れる可能性があります。つまり、ウィンドウ内の画像をすぐにロードする必要があります。では、画像がウィンドウ内にあるかどうかを判断するにはどうすればよいでしょうか? getBoundingClientRect は、要素のサイズとビューポートを基準としたその位置を返すことができます (詳細説明)

画像のtopとrightの値を通じて、画像がビューポート内にあるかどうかを判断できます。

2番目の質問では、imgにsrcを指定する代わりに、要素のsrc属性（カスタマイズ）に画像のリンクアドレスを格納し、読み込む必要がある場合はsrcに代入して画像をダウンロードします。

実装

アイデアを思いついたので、実装を開始します。次の HTML を使用してテストします

 <p class="container">
 <h1 id="图片懒加载">图片懒加载</h1>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt=""  >
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt=""  >
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt=""  >
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt=""  >
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt=""  >
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>

 </p>

HTML 内のリンクはすべて Baidu 画像からのものであり、ここでスタイルを無視して、ネットワークに読み込まれているかどうかを確認できます。前のアイデアに従って、次のコードがあります

//所有的图片
 var imgs = document.querySelectorAll('.lazy-img');
 //首屏图片加载
 lazyLoad(imgs)
 //剩余图片加载---监听滚动事件
 window.addEventListener('scroll',function(){
 //滚动事件触发太频繁了，所以加上节流
 throttle(lazyLoad(imgs),200,500)
 })
 }

以下は、lazyLoadの実装方法です

function lazyLoad(imgs,offset){
 offset = offset || 100;
 if (!imgs || imgs.length < 1) {
 console.log(&#39;imgs为空&#39;);
 return ;
 }
 [].slice.call(imgs).forEach(function(element,index){
 //元素的DomRect
 var rect = element.getBoundingClientRect()
 //出现在视窗中
 if (rect.top <= window.innerHeight + offset && rect.right > 0) {
 element.setAttribute(&#39;src&#39;,element.getAttribute(&#39;src&#39;))
 }
 })
}

要素がウィンドウの上端からオフセットされている場合、window.innerHeightを通じてウィンドウの高さを取得します。画像をロードします。ここで、offset は指定されたオフセット移動距離です。

スロットリング機能は次のとおりです

function throttle (fn, delay, atleast) {
 let timer = null
 let startTime = new Date()

 return function () {
 let context = this
 let args = arguments
 let curTime = new Date()

 clearTimeout(timer)
 if (curTime - startTime >= atleast) {
 fn.apply(context, args) // apply 指定函数指向的 上下文(this) 和 参数列表
 startTime = curTime
 } else {
 timer = setTimeout(function () {
 fn.apply(context, args)
 startTime = curTime
 }, delay)
 }
 }
 }

効果

ページがロードされ、画像が1枚だけロードされます

指定された位置まで下にスクロールすると、後続の画像が順番にロードされます

ファーストスクリーン以外の画像の遅延読み込みを実装する上記の JS の例は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

上記は私があなたのためにまとめたものです。

関連記事:

JSで衝突検出を実装する方法

vue-metaを使用してheadタグを管理する方法

vueでaタグのスタイルを変更するには?

ES6 に関する 7 つの実践的なヒントとは何ですか?

以上がJS で非ファーストスクリーン画像の遅延読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。