一款用于自动捕获网页图片并进行加载进度计算的插件

对于一些微信HTML的页面开发，如果图片比较多，通常会使用一个loading来过渡加载期，然而大多数情况下，loading都是模拟的一个跳动的百分数，等body onload之后，把loadinig隐藏
这样的结果是，有时候因为网络信号欠佳，100%后不能如期关闭loading而需要一定时间等待，甚至如果onload卡住，页面将停在100%无法打开，这是一种很糟糕的体验

使用此插件后，这种情况即成为过去式，插件将自动捕获网页上所有的图片，甚至包括所有外链css文件上嵌入的背景图片，然后监听这些图片的加载度变化
loading百分比是不是已经100%了，让数据说了算！

<script src="../libs/zepto-1.1.6.min.js"></script>
<script src="../src/jQuery.imgLoadCatch.js"></script>

文件需要依赖jQuery，当然zepto也是可以的，然后再引入插件本身

$(function() {
    $.imgLoadCatch({
        deep: 'all',
        step: function(percent) {
            console.log(percent + '%');
        },
        finish: function() {
            alert('全部图片加载完成!');
        }
    });
});

插件的使用是非常简单的，无需任何html上的改动，也不需要任何class标记
仅需要在jQuery ready后配置插件，并设置percent百分比输出和完成，即可完成全部功能

当然，肯定有更详细的js参数配置，以提供我们不同需求的开发：

deep：'img' / 'all'，设置图片捕获深度，默认值'img'
'all' 值将包含背景图片一起计算，略微消耗一点点性能，但因为处于loading状态，对用户体验没有什么影响

start：function回调，插件开始工作是执行一次

step：function回调，每次当一张图片被加载完毕时即执行一次，此回调传回三个参数

• percent：当前加载进度百分比，0~100，不带百分比符号
• total：当前页面上图片的总数
• count：当前实际已经被加载的图片数

imgTag：function回调，当IMG全部加载完成时执行一次
因为网页肯定先把所有IMG标签加载完，所以必定在完成之前执行
（当仅'img'深度时，回调仍然会执行，且同样在完成之前执行）

finish：function回调，所有图片加载完毕时执行
注意，为了让100%不至于一闪消失从而视觉上看不到效果，当所有图片加载完毕时，会延迟0.1秒再执行此回调

页面参数：

no-catch：对于某些特殊的img元素或背景图片(例如渐变色填充)，如果不想加入加载捕获列队，使用此属性标记即可:

<img no-catch src="space.gif">
<div no-catch style="background:linear-gradient(red,blue);"></div>

https://tevinli.github.io/imgloadcatch/index.html