欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 圖片懶加載的實(shí)現(xiàn)

 更新時(shí)間:2020年10月21日 11:12:47   作者:Marydon  
這篇文章主要介紹了js 圖片懶加載的實(shí)現(xiàn),幫助大家更好的優(yōu)化自身網(wǎng)頁(yè),提高網(wǎng)頁(yè)響應(yīng)速度,感興趣的朋友可以了解下

1.使用場(chǎng)景

  當(dāng)網(wǎng)頁(yè)上有大量圖片需要加載時(shí),如果一次性將圖片全部加載完,網(wǎng)頁(yè)加載時(shí)間會(huì)過(guò)長(zhǎng);

  網(wǎng)頁(yè)本身已經(jīng)反應(yīng)很慢了,如果你的頁(yè)面上又需要引用圖片,這時(shí)候同樣是雪上加霜。

2.圖片懶加載原理

  圖片懶加載,只不過(guò)是叫法比較高大上而已,其實(shí)現(xiàn)方式很簡(jiǎn)單,就是在需要的時(shí)候再給圖片的src屬性賦值,僅此而已。

3.代碼實(shí)現(xiàn)

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

  調(diào)用:

$(function() {
  // 實(shí)例化對(duì)象
  var ill = new ImgLazyLoad();
  // 調(diào)用
  ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});

4.涉及知識(shí)點(diǎn)

  網(wǎng)上也有很多實(shí)現(xiàn)方法,但是不能自定義設(shè)置加載圖片的時(shí)機(jī),為了實(shí)現(xiàn)這一點(diǎn),花了不少功夫才搞好。

  代碼很短,但是涉及的知識(shí)點(diǎn)很多。

// 獲取的是網(wǎng)頁(yè)的可視區(qū)域的高度(不滾動(dòng)的情況下)
document.documentElement.clientHeight || window.innerHeight
// 獲取的是網(wǎng)頁(yè)的可見(jiàn)高度(除去隱藏元素的高度)
document.body.clientHeight
// 獲取的是顯示屏的高度
window.screen.height
// 獲取網(wǎng)頁(yè)的被卷高度(ie下不支持前者獲取方式)
document.body.scrollTop || document.documentElement.scrollTop  
// 獲取指定元素距離網(wǎng)頁(yè)頂部的距離(靜態(tài)死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top

以上就是js 圖片懶加載的實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于js 圖片懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論