js 圖片懶載入的實現

阿新 • • 發佈：2020-10-22

1.使用場景

　　當網頁上有大量圖片需要載入時，如果一次性將圖片全部載入完，網頁載入時間會過長；

　　網頁本身已經反應很慢了，如果你的頁面上又需要引用圖片，這時候同樣是雪上加霜。

2.圖片懶載入原理

　　圖片懶載入，只不過是叫法比較高大上而已，其實現方式很簡單，就是在需要的時候再給圖片的src屬性賦值，僅此而已。

3.程式碼實現

/**
 * 圖片懶載入
 */
function ImgLazyLoad() {
  /**
   * 滾動到圖片所在位置再載入
   * @param imgId
   *   懶載入圖片的ID
   * @param imgSrc
   *   懶載入圖片的地址
   * @param distance
   *  圖片的可視距離（這個引數可以不傳）    
   */
  this.scrollLoad = function(imgId,imgSrc,distance) {    
    // 獲取該圖片的src
    var img_source = $('#' + imgId).attr('src');
    // 只執行一次
    if("" == img_source) {
      // 不滾動的情況下，網頁的可見高度
      var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
      // 獲取該圖片距離網頁頂部的距離
      var imgOffsetTop = $('#' + imgId)[0].offsetTop;
      // 獲取網頁的可見高度
      // var bodyClientHeight = document.body.clientHeight;
      
      // 1.網頁高度<小於網頁可視區域的高度(imgOffsetTop < documentClientHeight)，就不會發生滾動事件
      if (imgOffsetTop < documentClientHeight) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }      
      
      // 獲取螢幕高度
      //var screenHeight = window.screen.height;
      // 圖片距離網頁左上角的縱向偏移距離（距離網頁頂部的距離）
      var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
      // ie下帶有小數，所以只取整數
      max_imgClientTop = parseInt(max_imgClientTop);
      // 圖片可視距離（還差多少可以被看見）
      var max_imgClientDistance = max_imgClientTop - documentClientHeight;
      //0<= distance <=max_imgClientDistance
      // 1.引數不存在時，設值=0;(圖片剛從可視區域最底部出現時，距離達到最小)distance→→Min=0
      // 2.引數>網頁可見高度時，設值=可視區域高度;(不滾動時，距離達到最大)distance→→Max=max_imgClientDistance,scrollTop=0
      distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
      
      // 2.最大距離時，無滾動
      if (distance == max_imgClientDistance) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }
      
      // 頁面繫結滾動事件  
      $(document).scroll(function(){
        
        // 獲取網頁被卷高度
        // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 距離網頁最頂部的距離
        var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
        // 圖片的可視高度
        var clientHeight = documentClientHeight - imgClientTop;
        // 到達指定距離差或者圖片已經進入視野範圍
        if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
          $('#' + imgId)[0].src = imgSrc;
        }
        
      });
    }
  };
  /**
   * 通過單擊別的元素時再載入
   * @param clickId
   *  被繫結單擊事件的頁面元素ID
   * @param imgId
   *  
   * @param imgSrc
   *   懶載入圖片的地址
   */ 
  // 
  this.clickLoad = function(clickId,imgId,imgSrc) {
    // 獲取該圖片的src
    var img_source = $('#' + imgId).attr('src');
    // 只執行一次
    if("" == img_source) {
      // 繫結單擊事件
      $('#' + clickId).click(function(){
        $('#' + imgId)[0].src = imgSrc;
      });
    }
  };
};

　　呼叫：

$(function() {
  // 例項化物件
  var ill = new ImgLazyLoad();
  // 呼叫
  ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});

4.涉及知識點

　　網上也有很多實現方法，但是不能自定義設定載入圖片的時機，為了實現這一點，花了不少功夫才搞好。

　　程式碼很短，但是涉及的知識點很多。

// 獲取的是網頁的可視區域的高度（不滾動的情況下）
document.documentElement.clientHeight || window.innerHeight
// 獲取的是網頁的可見高度（除去隱藏元素的高度）
document.body.clientHeight
// 獲取的是顯示屏的高度
window.screen.height
// 獲取網頁的被卷高度（ie下不支援前者獲取方式）
document.body.scrollTop || document.documentElement.scrollTop　　
// 獲取指定元素距離網頁頂部的距離（靜態死值）
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top

以上就是js 圖片懶載入的實現的詳細內容，更多關於js 圖片懶載入的資料請關注我們其它相關文章！