Javascript 前臺實現圖片懶加載

適用於圖片較多的頁面，當頁面圖片太多，頁面加載起來一直在轉圈，誰也受不了，所以簡單的方法實現圖片的懶加載

借用官方API
DOM.getBoundingClientRect()

實現原理

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

代碼

html

//  img-warpper * 5， 每張gif鏈接都不一樣
<div class="img-warpper">
  <img class="lazyload" data-original="https://media3.giphy.com/media/k5GuJn7VslbpGQqHUB/200w.webp">
</div>
<div class="img-warpper">
  <img class="lazyload" data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp">
</div>
<div class="img-warpper">
  <img class="lazyload" data-original="https://media2.giphy.com/media/3h1rwFW1PpLxD9xLUR/200w.webp">
</div>
<div class="img-warpper">
  <img class="lazyload" data-original="https://media0.giphy.com/media/igHgY3xzYxmRcxwZBs/200w.webp">
</div>
<div class="img-warpper">
  <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
</div>

css

body {
  text-align: center;
 }

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

js

// 圖片懶加載類
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;
    // 圖片距離頂部的距離 <= 瀏覽器可視化的高度，從而推算出是否需要加載
    return bound.top <= clientHeight - 100; // -100是爲了看到效果，您也可以去掉
  }
  // 加載圖片
  loadImage(el, index) {
    // 獲取之前設置好的data-original值
    let src = el.getAttribute('data-original');
    // 賦值到src，從而請求資源
    el.src = src;
    // 避免重複判斷，已經確定加載的圖片應當從imglist移除
    this.imglist.splice(index, 1);
  }
  // 當瀏覽器滾動的時候，繼續判斷
  bindEvent() {
    window.addEventListener('scroll', () => {
      this.canILoad();
    });
  }
  // 初始化
  init() {
    this.canILoad();
    this.bindEvent();
  }
 }
// 實例化對象，參數則是需要使用懶加載的圖片類名,s
const lazy = new LazyLoad('.lazyload')

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

文章轉載https://zhuanlan.zhihu.com/p/40438238