微信H5使用resLoader实现加载页效果

前言

最近为所服务机构写了一个H5，名字和展现内容并不重要，就不赘述，铿锵铿锵一大顿，写完了。效果不错，符合主流手机浏览器，资源为3.49mb，不多不少，网速也都够。领导拍拍脑袋，改改这里，修修那里，匆匆忙忙，就上线了，完美与残缺总在一念之间。

一、微信H5没有页面加载效果是一种什么样的体验

没有加载页，实话说，给我母亲大人看的时候，她被突然奏响的BGM着实吓了一跳，也有很多人看了一段时间的白屏页，更有节点加载凌乱的个例。

没放加载页面，这是个大问题，是问题就要解决，而解决则要迅速。

遍寻百度，找到一份可快速编辑的加载页插件，“resLoader”。

二、先上干货，哪里下载，怎么用

resLoader的编写者为吕大豹

下载链接：http://files.cnblogs.com/files/lvdabao/resLoader.zip

使用方法：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var loader = new resLoader({       resources : [            'http://p2.qhimg.com/t01ed1438874f940dc0.jpg' ,            'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg' ,            'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg' ,            'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg' ,            'http://p9.qhimg.com/t01943ced462da67833.jpg' ,            'http://p0.qhimg.com/t01943ced462da67833.jpg' ,            'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg' ,            'http://p8.qhimg.com/t010f1e8badf1134376.jpg' ,            'http://p8.qhimg.com/t01cf37ea915533a032.jpg' ,            'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg' ,            'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg'       ],       onStart : function (total){            console.log( 'start:' +total);       },       onProgress : function (current, total){            console.log(current+ '/' +total);            var percent = current/total*100;            $( '.progressbar' ).css( 'width' , percent+ '%' );            $( '.progresstext .current' ).text(current);            $( '.progresstext .total' ).text(total);       },       onComplete : function (total){            alert( '加载完毕:' +total+ '个资源' );       } });   loader.start();