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

前言

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

如何判斷圖片加載的狀態

　　一、onload  onerror 

　　　 推薦使用這種方法，在圖片加載成功後，會觸發onload事件，就算有緩存只要從新請求了圖片地址，都會觸發onload事件；圖片加載失敗會觸發onerror事件。這種方式兼容性良好，推薦

　　二、imgObj.onreadystatechange

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

　　　測試了下：

　　　　chrome,firefox不會觸發此事件

　　　　IE Edge版本 不會觸發此事件

　　　　IE 10 9 會觸發此事件；更低版本的沒有測試

　　　因此不推薦使用 

　　三、imgObj.complete

　　　complete屬性能夠判斷圖片是否加載完成。可是不一樣的瀏覽器對complete的處理不一致：

　　　　若是圖片資源正常，圖片加載成功  全部瀏覽器都是 complete從false變爲true;

　　　　可是若是圖片資源異常，圖片加載失敗 chrome和firefox 在載入失敗後從false變爲true;可是IE 會一直是false

　　　因此不推薦使用這種方式。

圖片資源加載進度

　　能夠判斷出單個圖片資源是否加載完成了，就很容易計算出整個頁面全部圖片資源加載的進度了。

 1     document.addEventListener('DOMContentLoaded', function(){
 2       var imgs = document.querySelectorAll('img'), //全部圖片資源
 3           show = 0, //百分比
 4           num = 0; //加載完成的個數
 5       var all = imgs.length;
 6       [].slice.call(imgs).forEach(function(element,index){
 7          //無論是否加載成功，都num+1
 8         element.addEventListener('load',function(){
 9           num++;
10           show = Math.floor(100*num/all);
11 
12         })
13 
14         element.addEventListener('error',function(){
15           num++;
16           show = Math.floor(100*num/all);
17         })
18       })
19     })

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

　　在頁面所有加載完成後，再隱藏蒙版，便可實現比較友好的loading效果了

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