最近为所服务机构写了一个H5,名字和展现内容并不重要,就不赘述,铿锵铿锵一大顿,写完了。效果不错,符合主流手机浏览器,资源为3.49mb,不多不少,网速也都够。领导拍拍脑袋,改改这里,修修那里,匆匆忙忙,就上线了,完美与残缺总在一念之间。
没有加载页,实话说,给我母亲大人看的时候,她被突然奏响的BGM着实吓了一跳,也有很多人看了一段时间的白屏页,更有节点加载凌乱的个例。
没放加载页面,这是个大问题,是问题就要解决,而解决则要迅速。
遍寻百度,找到一份可快速编辑的加载页插件,“resLoader”。
resLoader的编写者为吕大豹
../201510/GridViewLiveTiles.html
使用方法:
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();