进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf
SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9
原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理。
js代码:
$(function () { var img = $('img'); var lenght = img.length; var cur = 0; var vader = $('.vader'); var progbar = $('.wrap'); var prog,progPrecent; img.each(function (i) { img[i].onload = function () { cur++; prog = cur / lenght * 100; progPrecent = prog.toFixed(1) + '%'; vader.width(progPrecent); vader.text(progPrecent); if (prog >= 100) { progbar.hide(); } }; }); });
注意点:这段js代码要放在head中,不然导致有的小图片执行到底下的js时之前已经加载完了。