前言

頁面太多圖片？那麼請你花20分鐘去最佳化一下頁面的效能

講道理，當你為圖片的src賦值時，DOM節點渲染完畢時就會主動去請求src指向的資源，即使該圖片不在使用者的可視範圍。那麼，如果圖片太多，載入頁面的速度會就會變慢。

效果圖

讓我們看開啟chrome的debug看看network皮膚

原理

1. 將資源路徑賦值到img標籤的data-xx屬性中，而不是src屬性
2. 獲取img節點距離瀏覽器頂部的距離，如果小於或等於瀏覽器視窗的可視高度，那麼就將data-xx的值賦值到src裡去

用到的Web API

程式碼

html

//  img-warpper * 5， 每張gif連結都不一樣

  


  


  


  


  

css

body {
  text-align: center;
 }

img {
  width: 100%;
  max-width: 300px;
  height: 200px;
  margin-bottom: 100px; // 為了方便看效果，將圖片儘可能的撐開
 }

javascript

// 圖片懶載入類
class LazyLoad {
  constructor(el) {
    this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懶載入的圖片集合
    this.init(); // 初始化
  }
  // 判斷是否該圖片是否可以載入
  canILoad() {
    let imglist = this.imglist;
    for (let i = imglist.length; i--;) {
      // 縮寫，相當於if true
      this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
    }
  }
  // 獲取圖片與視窗的資訊
  getBound(el) {
    let bound = el.getBoundingClientRect();
    let clientHeight = window.innerHeight;
    // 圖片距離頂部的距離  {
      this.imglist.length && this.canILoad();
    });
  }
  // 初始化
  init() {
    this.canILoad();
    this.bindEvent();
  }
 }
// 例項化物件，引數則是需要使用懶載入的圖片類名
const lazy = new LazyLoad('.lazyload')

非同步載入的圖片怎麼使用

1. 基本操作，非同步獲取圖片連結
2. 動態插入節點
3. 獲取這些新新增的節點
   3.1 給新新增的節點做一些標記，如類名或者屬性
4. lazy.imglist.push(Array.from(document.querySelectorAll(‘這些新的節點’)));