JS에서 첫 번째 화면이 아닌 이미지의 지연 로딩을 구현하는 방법-JS 튜토리얼-php.cn

JS에서 첫 번째 화면이 아닌 이미지의 지연 로딩을 구현하는 방법

亚连

풀어 주다： 2018-06-13 14:50:07

원래의

1736명이 탐색했습니다.

아래에서는 JS를 사용하여 첫 번째 화면이 아닌 이미지의 로딩을 지연시키는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

Goal

리소스 로딩을 줄이면 페이지 로딩 속도가 확실히 최적화될 수 있으므로 페이지 로딩 속도를 향상시키기 위해 페이지 로딩 시 즉시 다운로드되는 이미지 수를 줄여 페이지 로딩 속도를 향상시킬 수 있으며, 다른 이미지는 로딩 시 로드됩니다. 필요한 부하.

Thoughts

위의 목표를 달성하려면 몇 가지 생각해야 할 사항이 있습니다.

1. 즉시 로드해야 하는 이미지와 나중에 로드할 수 있는 이미지를 어떻게 결정하나요?

2. 지정된 시간에 이미지가 로드되도록 제어하는 방법은 무엇입니까?

첫 번째 질문의 경우 페이지가 열렸을 때 사용자에게 표시되는 사진은 즉시 로드되어야 하며, 나머지는 지연될 수 있습니다. 즉, 창의 이미지를 즉시 로드해야 합니다. 그렇다면 그림이 창에 있는지 확인하는 방법은 무엇입니까? getBoundingClientRect는 요소의 크기와 뷰포트를 기준으로 한 위치를 반환할 수 있습니다(상세 설명).

이미지의 top 및 right 값을 통해 이미지가 뷰포트에 있는지 여부를 확인할 수 있습니다.

두 번째 질문은 img에 src를 지정하는 대신 요소의 src 속성(customized)에 이미지 링크 주소를 저장하고, 로드해야 할 경우 src에 할당한 후 이미지를 다운로드하세요.

구현

이제 아이디어가 생겼으니 구현을 시작합니다. 다음 HTML을 사용하여


 <p class="container">
 <h1>图片懒加载</h1>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" src="http://c.hiphotos.baidu.com/zhidao/pic/item/1f178a82b9014a909461e9baa1773912b31bee5e.jpg">
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" src="http://img2.niutuku.com/desk/1208/1718/ntk-1718-66531.jpg">
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" src="http://2t.5068.com/uploads/allimg/151105/48-151105112944-51.jpg">
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" src="http://img2.niutuku.com/desk/anime/4654/4654-4708.jpg">
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" src="http://img2.niutuku.com/desk/1208/1721/ntk-1721-66572.jpg">
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>
 <p>测试性配文，测试图片懒加载</p>

 </p>

로그인 후 복사

html의 링크는 모두 Baidu 이미지에서 가져온 것입니다. 여기에서 스타일을 무시하세요. 이전 아이디어에 따르면 다음 코드가 있습니다

//所有的图片
 var imgs = document.querySelectorAll(&#39;.lazy-img&#39;);
 //首屏图片加载
 lazyLoad(imgs)
 //剩余图片加载---监听滚动事件
 window.addEventListener(&#39;scroll&#39;,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)
 }
 }
 }

로그인 후 복사

Effect

페이지가 로드되면 사진 한 장만 로드됩니다