頁面性能優化-原生JS實現圖片懶加載

時間 2019-12-11

原文原文鏈接

在項目開發中，咱們每每會遇到一個頁面須要加載不少圖片的狀況。咱們能夠一次性加載所有的圖片，可是考慮到用戶有可能只瀏覽部分圖片。因此咱們須要對圖片加載進行優化，只加載瀏覽器窗口內的圖片，當用戶滾動時，再加載更多的圖片。這種加載圖片的方式叫作圖片懶加載，又叫作按需加載或圖片的延時加載。這樣作的好處是：1.能夠加快頁面首屏渲染的速度；2.節約用戶的流量。javascript

一.實現思路html

1.圖片img標籤自定義一個屬性data-src來存放真實的地址。前端

2.當滾動頁面時，檢查全部的img標籤，判斷是否出如今事業中，若是出如今視野中，繼續進行判斷，看齊是否被加載過了，若是沒有加載，那就進行加載。java

判斷圖片元素是否處於瀏覽器視野中的示意圖（手繪）：瀏覽器

二.根據思路完成代碼以下：性能優化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原生js實現圖片懶加載</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul{
      overflow: hidden;
      list-style: none;
    }
    li{
      float: left;
      width: 50%;
      height: 200px;
      padding: 10px;
    }
    li img{
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div class="container">
  <ul>
    <li><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></li>
    <li><img src="" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></li>
  </ul>
</div>
<script>
  // window綁定滾動事件
  window.addEventListener('scroll',function(){
    // 遍歷全部的img標籤
    Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
      let img=li.getElementsByTagName('img')[0];
      // 判斷當前img是否出如今了視野中
      // 判斷當前img是否被加載過了
      if(checkShow(img) && !isLoaded(img)){
        loadImg(img);
      }
    })
  });

  // 判斷img是否出現瀏覽器視野中
  function checkShow(img) {
    let scrollTop=document.documentElement.scrollTop; // 頁面向上滾動的高度
    let windowHeight=window.innerHeight; //瀏覽器自身高度
    let offsetTop=img.offsetTop; //目標標籤相對於document的高度
    return (offsetTop > scrollTop && offsetTop <(windowHeight + scrollTop));
  }

  // 判斷是否已經加載過
  function isLoaded(img) {
    return img.getAttribute('src')===img.getAttribute('data-src');
  }

  // 加載圖片
  function loadImg(img) {
   img.setAttribute('src',img.getAttribute('data-src'));
  }
</script>
</body>
</html>

好了，在瀏覽器中運行一下，第一次進頁面若是不滾動滾輪的話什麼也看不到，因此第一次進頁面須要調用checkShow(),處於視野中的圖片也加載出來。app

在代碼最後加上：函數

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

此時咱們發現判斷加載視野中的圖片代碼存在重複，直接封裝成一個新的方法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是否出如今了視野中
      // 判斷當前img是否被加載過了
      if(checkShow(img) && !isLoaded(img)){
        loadImg(img);
      }
    })
  }

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

三.性能優化優化

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

解決方法：當頁面中止滾動的時候，再去執行頁面中的方法，相似與函數節流（throttle）

Tips:函數節流：等時間間隔執行函數，讓一個函數不要執行得太頻繁，減小一些過快的調用來節流。

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

經過打印的日誌發現當滾動中止後才執行lazyRenderImg方法的，確實減小了沒必要要調用lazyRenderImg的次數。

頁面性能優化之圖片懶加載就寫這麼多了，網頁優化還有不少方法與技巧，前端路漫漫其修遠兮，吾將上下而求索。本文不足之處，請多指正。

參考資料：

https://www.jianshu.com/p/1b32e16ed0e5