图片载入状态判断及实现百分比效果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');
    }