JS如何實(shí)現(xiàn)非首屏圖片延遲加載-創(chuàng)新互聯(lián)

 
 
圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載
 
測試性配文，測試圖片懶加載

 

html中鏈接都來自百度圖片，可在network中觀察是否加載，這里忽略樣式。按照之前的思路，有以下代碼

//所有的圖片
 var imgs = document.querySelectorAll('.lazy-img');
 //首屏圖片加載
 lazyLoad(imgs)
 //剩余圖片加載---監(jiān)聽滾動事件
 window.addEventListener('scroll',function(){
 //滾動事件觸發(fā)太頻繁了，所以加上節(jié)流
 throttle(lazyLoad(imgs),200,500)
 })
 }

下面就是如何實(shí)現(xiàn)lazyLoad

function lazyLoad(imgs,offset){
 offset = offset || 100;
 if (!imgs || imgs.length < 1) {
 console.log('imgs為空');
 return ;
 }
 [].slice.call(imgs).forEach(function(element,index){
 //元素的DomRect
 var rect = element.getBoundingClientRect()
 //出現(xiàn)在視窗中
 if (rect.top <= window.innerHeight + offset && rect.right > 0) {
 element.setAttribute('src',element.getAttribute('data-src'))
 }
 })
}

通過window.innerHeight獲取到視窗的高度，當(dāng)元素距離視窗上邊沿為offset時(shí)，加載圖片；其中offset為指定的偏移距離。

節(jié)流函數(shù)如下

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 指定函數(shù)指向的 上下文(this) 和 參數(shù)列表
 startTime = curTime
 } else {
 timer = setTimeout(function () {
 fn.apply(context, args)
 startTime = curTime
 }, delay)
 }
 }
 }

效果

頁面載入完成，只加載了一張圖片

向下滾動到指定位置，才會依次加載后續(xù)圖片

關(guān)于“JS如何實(shí)現(xiàn)非首屏圖片延遲加載”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。