js圖片加載效果實例代碼（延遲加載+瀑布流加載）

更新時間：2017年05月12日 15:46:08 作者：盛夏光年

本篇文章主要介紹了js圖片加載效果實例代碼（延遲加載+瀑布流加載），非常具有實用價值，需要的朋友可以參考下

主要做了兩種圖片加載的效果

一種是遇到頁面圖片比較多的時候，帶讀條效果的加載提示（為了驗證正確加載，設(shè)置了1秒鐘的加載間隔時間）

另外一種是根據(jù)滑塊的位置進行圖片的預加載，在用戶不察覺的情況下，實現(xiàn)瀑布流的加載效果

一延遲加載

主要思路：

HTML的img標簽中，將正確的地址存在data-src屬性中，給所有圖片設(shè)置一個轉(zhuǎn)圈圈的loading圖片作為background
js中，依次讀取每一個img，將data-src中的地址替換到src中，去掉background
每成功加載一張圖片，進度條的百分比進行相應的變化。
如果加載不成功，就提示圖片加載錯誤。

HTML結(jié)構(gòu)很簡單，就是一個div.picList包裹了所有img，然后加上一個簡單的進度條div#loadBar

<body>
  <div class="picList">
    <img class="lazy" data-src="pic/compressed/picList1.jg">
    <img class="lazy" data-src="pic/compressed/picList2.jpg">
    <img class="lazy" data-src="pic/compressed/picList3.jpg">
    <img class="lazy" data-src="pic/compressed/picList4.jpg">
    <img class="lazy" data-src="pic/compressed/picList5.jpg">
    <img class="lazy" data-src="pic/compressed/picList6.jpg">
    <img class="lazy" data-src="pic/compressed/picList7.jpg">
    <img class="lazy" data-src="pic/compressed/picList8.jpg">
    <img class="lazy" data-src="pic/compressed/picList9.jpg">
    <img class="lazy" data-src="pic/compressed/picList10.jpg">
  </div>

  <div id="loadBar">
    <div id="loadBarMask"></div>
  </div>
</body>

css（使用的scss，編譯時會自動加上各種兼容前綴）

.picList{
  img{
    width: 100px;
    height: 100px;
    position: relative;

    /*加載失敗時顯示灰底文字*/
    &:after{
      content: "( ⊙ o ⊙ )加載失敗";
      font-size: 6px;
      font-family: FontAwesome;
      color: rgb(100, 100, 100);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}

.lazy{
  background: url(../pic/loading.gif) center no-repeat;
  border: 1px solid black;
}

#loadBar{
  width: 200px;
  height: 15px;
  background: linear-gradient(90deg,#187103,#81b50b,#187103);
  border: 10px solid white;

  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -100px;

  #loadBarMask{
    width: 70%;//這個數(shù)值顯示沒有加載成功的圖片
    height: 100%;
    background-color: beige;
    position: absolute;
    right: 0;
  }
}

css里面需要注意的地方有兩個：

一個是把圖片加載錯誤時顯示的灰底文字放在了img的after偽類中，當圖片加載失敗，又去掉了background的gif圖片之后，就會顯示這個部分的內(nèi)容及樣式。
一個是進度條的樣式。寫得很簡單，主要是一層帶漸變的綠色和一層白色疊在一起。綠色表示已加載，白色表示未加載。顯示的時候，直接控制白色那層的寬度即可。

js部分（直接執(zhí)行l(wèi)oadPicPerSecond()即可）

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加載一張圖片*/

function loadPicPerSecond(){

  lazyPic.each(function(index){

    var self = $(this);

    //console.log(self[0].complete);
    /*img標簽已經(jīng)事先寫在html中，所以此時的complete狀態(tài)全部都是true*/

    setTimeout(function(){

      src[index] = self.attr('data-src');
      self.attr('src',src[index]);
      self.removeClass('lazy');

      //圖片獲得正確src地址之后，可以執(zhí)行下面的onload操作
      self[0].onload = function(){

        //加載讀條loadBar動畫
        countPic();
      }

      //圖片獲得的src地址不正確時，執(zhí)行下面的onerror操作
      self[0].onerror = function(){
        /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
        countPic();
      }

    },1000*index);

  })

}

/*根據(jù)onload的執(zhí)行情況來計算當前的圖片加載進度.每onload一次，activePic就增加1*/

function countPic(){

  activePic++;

  var leftPic = totalPic - activePic;
  var percentPic = Math.ceil(leftPic/totalPic*100);//沒有加載的圖片百分比，和loadBarMask的寬度占比配合

  console.log("已加載"+(100-percentPic)+"%");

  loadBarMask.css("width",percentPic+"%");

  if(percentPic==0){
    $('#loadBar').hide();
  }
}

二瀑布流加載

主要思路：

監(jiān)聽窗口滾動情況，當已經(jīng)加載的圖片的最后一張快要進入窗口的時候，開始加載下面的圖片。
假設(shè)所有的圖片地址已經(jīng)存在一個json數(shù)據(jù)中，每次讀取10張圖片地址，加載它們之后，插入到現(xiàn)有的瀑布流末尾。
如此往復，直到加載完所有圖片。

HTML和前面部分相同，只是把src寫成正常地址即可。css完全一樣。

js部分

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var scrollTop,
  clientHeight,
  scrollHeight;

var threshold = 200; //最后一張圖片距離窗口200px的時候開始加載圖片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加載的圖片數(shù)據(jù)
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
  dirtSrc + "20.jpg",
  dirtSrc + "21.jpg",
  dirtSrc + "22.jpg",
  dirtSrc + "23.jpg",
  dirtSrc + "24.jpg",
  dirtSrc + "25.jpg",
  dirtSrc + "26.jpg",
  dirtSrc + "27.jpg",
  dirtSrc + "28.jpg",
  dirtSrc + "29.jpg",
  dirtSrc + "30.jpg",
  dirtSrc + "31.jpg",
  dirtSrc + "32.jpg",
  dirtSrc + "33.jpg",
  dirtSrc + "34.jpg",
  dirtSrc + "35.jpg",
  dirtSrc + "36.jpg",
  dirtSrc + "37.jpg",
  dirtSrc + "38.jpg",
  dirtSrc + "39.jpg",
  dirtSrc + "40.jpg",
  dirtSrc + "41.jpg",
  dirtSrc + "42.jpg",
  dirtSrc + "43.jpg",
  dirtSrc + "44.jpg",
  dirtSrc + "45.jpg",
  dirtSrc + "46.jpg",
  dirtSrc + "47.jpg",
  dirtSrc + "48.jpg",
  dirtSrc + "49.jpg",
]};

//加載次數(shù)計數(shù)器
var scrollIndex = 0;

$(function(){

  /*監(jiān)聽窗口滾動情況*/
  $(window).on('scroll',function(){

    scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
    clientHeight = $(window).height();
    scrollHeight = picList.last().height();//picList.last()[0].clientHeight

    /*目標與窗口的距離達到閾值時開始加載*/
    if(scrollHeight-clientHeight-scrollTop < threshold){
      scrollPic(10);
    }
  })
})

/*根據(jù)滾動程度加載圖片，每次加載perAmount張*/

function scrollPic(perAmount = 10){

  var totalAmount = perAmount * (scrollIndex+1);

   //考慮到最后一次加載的時候，剩余的圖片數(shù)量有可能達不到限定的每次加載的數(shù)量，這時候需要更改totalAmount的值
  if(totalAmount>picData.imgSrc.length){
    totalAmount = picData.imgSrc.length;
  }
  for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
    var oimg = new Image();
    oimg.src = picData.imgSrc[scrollIndex];
    picList.append(oimg);
  }

}

比較捉急的就是scrollTop、height那幾個值的取值對象，總是記不清楚，所以按照js和jquery都寫上了，以后可以直接用。將數(shù)值關(guān)系搞定之后，只要滿足條件就觸發(fā)加載即可。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: