如何原生JS實現(xiàn)圖片懶加載之頁面性能優(yōu)化

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

在代碼最后加上：

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

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

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

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

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

三.性能優(yōu)化

問題：window.scroll 方法頁面只要一滾動就會觸發(fā)里面的方法，對性能影響很大

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

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

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

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

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