js手動實現簡易懶加載----LazyLoad

前言

在網頁加載中，對於一些存在很多Image的網頁，一次加載所有圖片，會造成性能浪費，圖片優化的方法有很多，例如base64、雪碧圖等，圖片懶加載也是比較常見的一種性能優化的方法

原理

給頁面中img標籤設定自定義屬性data-original,用來存放真正的img源URL，給所有img的src屬性設定爲一張靜態圖片或者不設置

監聽窗口滾動scroll事件，遍歷圖片計算圖片是否出現在瀏覽器可視窗口內

當圖片出現在視窗中時再給他賦予真實的圖片地址，這樣可以保證首屏的加載速度然後按需加載圖片。

如何判斷元素是否在可視區域

方法一

getBound(el) {
  let clientHeight = document.documentElement.clientHeight, //獲取屏幕可視窗口高度
  offsetTop = el.offsetTop, //獲取元素相對於文檔頂部的距離
  scrollTop = el.documentElement.scrollTop //獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離
  return offsetTop - screenTop < clientHeight //返回true則加載圖片
}

方法二 

getBound(el) {
  let bound = el.getBoundingClientRect()
  let clientHeight = window.innerHeight
  // 圖片距離頂部的距離 <= 瀏覽器可視化的高度，從而推算出是否需要加載
  return bound.top <= clientHeight - 100
}

getBoundingClientRect 

返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。

DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

圖片及引用都來自getBoundingClientRect

方法三（更新）

發現一個瀏覽器的API，IntersectionObserver API 使用教程

代碼暫未更新。。。

代碼實現

代碼基於React框架實現，使用方法二來判斷圖片是否出現在可視區域

HTML

<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media2.giphy.com/media/3h1rwFW1PpLxD9xLUR/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp"
  />
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

img {
  width: 100%;
  max-width: 300px;
  height: 200px;
}

.img-warpper {
  width: 100%;
  height: 200px;
  max-width: 300px;
  margin-bottom: 100px;
}

JS

class LazyLoad {
  constructor(el) {
    this.array = Array.from(document.querySelectorAll(el))
    this.init() //初始化
  }
  init() {
    this.load() //首次調用，判斷頁面中圖片是否加載
    window.addEventListener('scroll', () => {
      this.load()
    })
  }
  load() {
    //遍歷所有節點調用函數判斷是否加載圖片
    this.array.forEach(item => this.getBound(item) && this.loadImg(item))
  }
  getBound(el) {
    //判斷圖片是否出現在可視窗口中
    let bound = el.getBoundingClientRect()
    let clientHeight = window.innerHeight
    // 圖片距離頂部的距離 <= 瀏覽器可視化的高度，從而推算出是否需要加載
    return bound.top <= clientHeight - 100 // -100是爲了看到效果，您也可以去掉
  }
  loadImg(el) {
    //將自定義屬性賦值給標籤src屬性
    el.src = el.getAttribute('data-original')
  }
}

優化

對於比較大的圖片記載事件可能會長一些，可以使用靜態圖片佔位

對於頻繁觸發的滾動事件，可以考慮函數節流和防抖，有空在分享