原生js實現圖片懶加載原理

時間 2019-11-17

原文原文鏈接

背景：頁面圖片多，加載的圖片就多。服務器壓力就會很大。不只影響渲染速度還會浪費帶寬。好比一個1M大小的圖片，併發狀況下，達到1000併發，即同時有1000我的訪問，就會產生1個G的帶寬。爲了解決以上問題，提升用戶體驗，就出現了懶加載方式來減輕服務器的壓力，優先加載可視區域的內容，其餘部分等進入了可視區域再加載，從而提升性能。html

1.懶加載原理
一張圖片就是一個<img>標籤，瀏覽器是否發起請求圖片是根據<img>的src屬性，因此實現懶加載的關鍵就是：瀏覽器

在圖片沒有進入可視區域時，先不給<img>的src賦值，這樣瀏覽器就不會發送請求了，等到圖片進入可視區域再給src賦值。服務器

2.懶加載思路及實現
實現懶加載有四個步驟，以下：
1.加載loading圖片
2.判斷哪些圖片要加載【重點】
3.隱形加載圖片
4.替換真圖片併發

話很少說，代碼滿上:函數

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>懶加載實例</title>
</head>

<style>
  .imgList {
    width: 80%;
    margin: 0 auto;
  }

  .img_item {
    width: 100%;
    background: #9999997a;
    margin: 20px 0;
  }
</style>

<body>
  <div class="imgList">
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
    <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" />
  </div>
</body>
<script>
  // 等到所有資源加載徹底再加載
  window.onload = function () {
    // 獲取圖片列表
    var imgList = document.getElementsByClassName('imgList')[0].children;
    //console.log('imgList', imgList);
    // 滾動觸發函數
    window.onscroll = function () {
      lazyLoad(imgList);
    };
    // 獲取元素到瀏覽器頂部的距離
    function getTop(e) {
      return e.offsetTop;
    }
    // 懶加載實現
    function lazyLoad(imgs) {
      var viewHeight = window.innerHeight;//獲取可視高度(屏幕高度)
      var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//獲取滾動的值
      for (var i = 0; i < imgs.length; i++) {
        // 若是滾動的大小和屏幕高度之和大於元素到頂部的距離
        if ((viewHeight + scrollHeight) > getTop(imgs[i])) {
          /**
           * 當即執行函數：定義一個匿名函數，建立了一個新的函數做用域，不會破壞污染全局的命名空間，
          此時如果想訪問全局對象，將全局對象以參數形式傳進去便可
           * */
          (function (i) {
            /**
             * setTimeout:設置一個定時器，製造懶加載的延遲加載的效果
             * */
            setTimeout(function () {
              var temp = new Image();
              temp.src = imgs[i].getAttribute('data-src');
              temp.onload = function () {
                imgs[i].setAttribute('src', temp.src);
              }
            }, 1000)
          })(i)
        }
      }
    }
  }
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。