html5教程-微信H5使用resLoader实现加载页效果

发布时间:2018-12-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-微信H5使用resLoader实现加载页效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前言

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

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

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

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

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

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

resLoader的编写者为吕大豹

下载链接:https://files.cnblogs.COM/files/lvdabao/resLoader.zip

使用方法:

 VAR loader = new resLoader({      resources : [           'https://p2.qhimg.com/t01ed1438874f940dc0.jpg',           'https://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',           'https://p2.qhimg.com/t01dd90DFbec92074d0.jpg',           'https://p7.qhimg.com/t01CFec6d87cde457c5.jpg',           'https://p9.qhimg.com/t01943ced462da67833.jpg',           'https://p0.qhimg.com/t01943ced462da67833.jpg',           'https://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',           'https://p8.qhimg.com/t010F1e8badf1134376.jpg',           'https://p8.qhimg.com/t01cf37ea915533a032.jpg',           'https://P3.qhimg.com/t0193d8a3963e1803e9.jpg',           'https://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();

前言

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

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

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

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

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

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

resLoader的编写者为吕大豹

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

使用方法:

 var loader = new resLoader({      resources : [           'https://p2.qhimg.com/t01ed1438874f940dc0.jpg',           'https://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',           'https://p2.qhimg.com/t01dd90dfbec92074d0.jpg',           'https://p7.qhimg.com/t01cfec6d87cde457c5.jpg',           'https://p9.qhimg.com/t01943ced462da67833.jpg',           'https://p0.qhimg.com/t01943ced462da67833.jpg',           'https://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',           'https://p8.qhimg.com/t010f1e8badf1134376.jpg',           'https://p8.qhimg.com/t01cf37ea915533a032.jpg',           'https://p3.qhimg.com/t0193d8a3963e1803e9.jpg',           'https://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();

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-微信H5使用resLoader实现加载页效果全部内容,希望文章能够帮你解决html5教程-微信H5使用resLoader实现加载页效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。