如何判断图片加载的状态1、onload onerror
推荐使用这种方法，在图片加载成功后，会触发onload事件，就算有缓存只要重新请求了图片地址，都会触发onload事件；图片加载失败会触发onerror事件。这种方式兼容性良好，推荐
2、imgobj.onreadystatechange
部分浏览器支持此种方法，根据 readstate === ‘complete'可判断图片是否加载完成。
测试了下：
chrome,firefox不会触发此事件
ie edge版本 不会触发此事件
ie 10 9 会触发此事件；更低版本的没有测试
所以不推荐使用
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 的详细内容。