圖片載入狀態判斷及實現百分比效果loading

前言

　　一些大的外部資源會導致頁面載入速度慢，這時候一般會加上loading效果；這裡實現的是根據圖片載入進度的百分比loading效果

#如何判斷圖片載入的狀態

　　1、onload  onerror 

　　　 推薦使用這種方法，在圖片載入成功後，會觸發onload事件，就算有快取只要重新觸發了圖片位址，都會onload事件；圖片載入失敗會觸發onerror事件。這種方式相容性良好，建議

　　2、imgObj.onreadystatechange

　　　 部分瀏覽器支援此種方法，根據 readState === ‘complete'可判斷圖片是否已載入完成。

　　　測試了下：

　　　　chrome,firefox不會觸發此事件

　　　　IE Edge版本不會觸發此事件

　　　　　IE Edge版本不會觸發此事件

[9 　　　 10　事件；更低版本的沒有測試

　　　所以不建議使用 

　　3、imgObj.complete

#　　　complete屬性可以判斷圖片是否載入完成。但不同的瀏覽器對complete的處理不一致：

　　　　如果圖片資源正常，圖片載入成功 所有瀏覽器都是complete從false變為true;

　　　　但是如果圖片資源異常，圖片載入失敗chrome和firefox 在載入失敗後從false變成true;但是IE 會一直是false

　　　所以不建議使用這種方式。

圖片資源載入進度

　　可以判斷單一圖片資源是否載入完成了，就很容易計算出整個頁面所有圖片資源載入的進度了。

document.addEventListener('DOMContentLoaded', function(){
      var imgs = document.querySelectorAll('img'), //所有图片资源
          show = 0, //百分比
          num = 0; //加载完成的个数
      var all = imgs.length;
      [].slice.call(imgs).forEach(function(element,index){
         //不管是否加载成功，都num+1
        element.addEventListener('load',function(){
          num++;
          show = Math.floor(100*num/all);

        })

        element.addEventListener('error',function(){
          num++;
          show = Math.floor(100*num/all);
        })
      })
    })

　　在加上蒙版和百分比字樣，很容易實現載入的百分比效果。

　　在

，再隱藏蒙版，即可實現比較友善的loading效果了

    window.onload = function(){
      document.querySelector('.mask').classList.add('hide');
    }

以上是圖片載入狀態判斷及實現百分比效果loading的詳細內容。更多資訊請關注PHP中文網其他相關文章！