手把手實現圖片懶載入+封裝vue懶載入元件

1、為什麼要懶載入或者預載入

圖片對頁面載入速度影響非常大

當頁面圖片比較多，載入速度慢，非常影響使用者體驗 

思考一下，頁面有可能有幾百張圖片，但是首屏上需要展示的可能就一張而已，其他的那些圖片能不能晚一點再載入，比如使用者往下滾動的時候…… 

這是為什麼要用懶載入的原因
 

那預載入呢？
這個非常語義化，預備，提前……
就是讓使用者感覺到你載入圖片非常快，甚至使用者沒有感受到你在載入圖片

<img class="lazy" src="[佔點陣圖]" src="[真實url地址]" data-srcset="[不同螢幕密度下，不同的url地址]" alt="I`m an image!">
複製程式碼

imgEle.offsetTop < window.innerHeight + document.body.scrollTop
複製程式碼

  function isInViewport(ele) {
    // 元素頂部 距離 視口左上角 的距離top <= 視窗高度 （反例：元素在螢幕下方的情況）
    // 元素底部 距離 視口左上角 的距離bottom > 0 (反例：元素在螢幕上方的情況)
    // 元素display樣式不為none
    const notBelow = ele.getBoundingClientRect().top <= window.innerHeight ? true : false;
    const notAbove = ele.getBoundingClientRect().bottom >= 0 ? true : false;
    const visable = getComputedStyle(ele).display !== "none" ? true : false;
    return notBelow && notAbove && visable ? true : false;
  }
複製程式碼

document.addEventListener("DOMContentLoaded", () => {
  // 獲取所有class為lazy的img標籤
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  // 這個active是節流throttle所用的標誌位，這裡用到了閉包知識
  let active = false;

  const lazyLoad = () => {
    // throttle相關：200ms內只會執行一次lazyLoad方法
    if (active) return;
    active = true;

    setTimeout(() => {
      lazyImages.forEach(lazyImage => {
        // 判斷元素是否進入viewport
        if (isInViewport(lazyImage)) {
          // <img class="lazy" src="[佔點陣圖]" src="[真實url地址]" data-srcset="[不同螢幕密度下，不同的url地址]" alt="I`m an image!">
          // ele.dataset.* 可以讀取自定義屬性集合，比如data-*
          // img.srcset 屬性用於設定不同螢幕密度下，image自動載入不同的圖片  比如<img src="image-128.png" srcset="image-256.png 2x" />
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          // 刪除class  防止下次重複查詢到改img標籤
          lazyImage.classList.remove("lazy");
        }
        // 更新lazyImages陣列，把還沒處理過的元素拿出來
        lazyImages = lazyImages.filter(image => {
          return image !== lazyImage;
        });
        // 當全部處理完了，移除監聽
        if (lazyImages.length === 0) {
          document.removeEventListener("scroll", lazyLoad);
          window.removeEventListener("resize", lazyLoad);
          window.removeEventListener("orientationchange", lazyLoad);
        }
      })

      active = false;
    }, 200);
  }

  document.addEventListener("scroll", lazyLoad);
  document.addEventListener("resize", lazyLoad);
  document.addEventListener("orientationchange", lazyLoad);
})
複製程式碼

2）、適合單頁應用的寫法（模擬封裝vue的懶載入）

① 核心實現

• 因為是demo，所以執行時機放到vue的全域性mounted鉤子裡面（這樣的首屏體驗其實是不好的），不過足夠理解就好了 
• 跟上面不同的地方：let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));的獲取時機放在了定時器裡面，不是一開始就拿到全域性的lazyImages，而是每次重新整理時才拿到還沒處理過的

function LazyLoad() {
  // 這個active是節流throttle所用的標誌位，這裡用到了閉包知識
  let active = false;

  const lazyLoad = () => {
    // throttle相關：200ms內只會執行一次lazyLoad方法
    if (active) return;
    active = true;

    setTimeout(() => {
      // 獲取所有class為lazy的img標籤，這裡由於之前已經把處理過的img標籤的class刪掉了  所以不會重複查詢
      let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

      lazyImages.forEach(lazyImage => {
        // 判斷元素是否進入viewport
        if (isInViewport(lazyImage)) {
          // <img class="lazy" src="[佔點陣圖]" src="[真實url地址]" data-srcset="[不同螢幕密度下，不同的url地址]" alt="I`m an image!">
          // ele.dataset.* 可以讀取自定義屬性集合，比如data-*
          // img.srcset 屬性用於設定不同螢幕密度下，image自動載入不同的圖片  比如<img src="image-128.png" srcset="image-256.png 2x" />
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          // 刪除class  防止下次重複查詢到改img標籤
          lazyImage.classList.remove("lazy");
        }

        // 當全部處理完了，移除監聽
        if (lazyImages.length === 0) {
          document.removeEventListener("scroll", lazyLoad);
          window.removeEventListener("resize", lazyLoad);
          window.removeEventListener("orientationchange", lazyLoad);
        }
      })

      active = false;
    }, 200);
  }

  document.addEventListener("scroll", lazyLoad);
  document.addEventListener("resize", lazyLoad);
  document.addEventListener("orientationchange", lazyLoad);
}
複製程式碼

② 在全域性中的`mounted`鉤子中執行

const vm = new Vue({
  el: `.wrap`,
  store,
  mounted: function () {
    LazyLoad();
  }
});
複製程式碼

③ 封裝 img-lazy元件

<template>
  <img :class="[`lazy`, className]" :src="defaultImg" :src="url" :data-srcset="`${url} 1x`" alt="fordeal">
</template>

<script>
  export default {
    props: {
      url: {
        type: String
      },
      defaultImg: {
        type: String,
        default: [預設圖片]
      className: {
        type: String,
        default: ``
      }
    }
  }
</script>
複製程式碼

④ 使用

<img-lazy className="image" :url="item.display_image" />複製程式碼

以上實現的只是比較粗糙的版本，要真正實現效能大幅提升優化還需要處理較多的細節，本文旨在讓幫助部分同學瞭解基本原理，有了巨集觀的認識後，可以嘗試去讀一下相關這種懶載入外掛的原始碼，能學到不少東西。

感謝

感謝您耐心看到這裡，希望有所收穫！

我在學習過程中喜歡做記錄，分享的是自己在前端之路上的一些積累和思考，希望能跟大家一起交流與進步，更多文章請看amandakelake的Github部落格