如何原生JS實(shí)現(xiàn)圖片懶加載之頁(yè)面性能優(yōu)化-創(chuàng)新互聯(lián)

好了，在瀏覽器中運(yùn)行一下，第一次進(jìn)頁(yè)面如果不滾動(dòng)滾輪的話什么也看不到，所以第一次進(jìn)頁(yè)面需要調(diào)用checkShow(),處于視野中的圖片也加載出來(lái)。

在代碼最后加上：

// 第一次進(jìn)頁(yè)面加載處于視野中的圖片
 Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
 let img=li.getElementsByTagName('img')[0];
 // 判斷當(dāng)前img是否出現(xiàn)在了視野中
 // 判斷當(dāng)前img是否被加載過(guò)了
 if(checkShow(img) && !isLoaded(img)){
  loadImg(img);
 }
 })

此時(shí)我們發(fā)現(xiàn)判斷加載視野中的圖片代碼存在重復(fù)，直接封裝成一個(gè)新的方法lazyRenderImg();

// window綁定滾動(dòng)事件
 window.addEventListener('scroll',function(){
 // 遍歷所有的img標(biāo)簽
 lazyRenderImg();
 });

function lazyRenderImg(){
 Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
  let img=li.getElementsByTagName('img')[0];
  // 判斷當(dāng)前img是否出現(xiàn)在了視野中
  // 判斷當(dāng)前img是否被加載過(guò)了
  if(checkShow(img) && !isLoaded(img)){
  loadImg(img);
  }
 })
 }

 // 第一次進(jìn)頁(yè)面加載處于視野中的圖片
 lazyRenderImg();

三.性能優(yōu)化

問(wèn)題：window.scroll 方法頁(yè)面只要一滾動(dòng)就會(huì)觸發(fā)里面的方法，對(duì)性能影響很大

解決方法：當(dāng)頁(yè)面停止?jié)L動(dòng)的時(shí)候，再去執(zhí)行頁(yè)面中的方法，類似與函數(shù)節(jié)流（throttle）

Tips:函數(shù)節(jié)流：等時(shí)間間隔執(zhí)行函數(shù)， 讓一個(gè)函數(shù)不要執(zhí)行得太頻繁，減少一些過(guò)快的調(diào)用來(lái)節(jié)流。

// window綁定滾動(dòng)事件
 let timer;
 window.addEventListener('scroll',function(){
 console.log('scroll')
 // 遍歷所有的img標(biāo)簽
 if(timer){
  clearTimeout(timer)
 }
 timer=setTimeout(()=>{
  console.log('lazyRenderImg...');
  lazyRenderImg();
 },300);

通過(guò)打印的日志發(fā)現(xiàn)當(dāng)滾動(dòng)停止后才執(zhí)行lazyRenderImg方法的，確實(shí)減少了不必要調(diào)用lazyRenderImg的次數(shù)。

以上是“如何原生JS實(shí)現(xiàn)圖片懶加載之頁(yè)面性能優(yōu)化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！