给H5页面添加百分比的进度条,精确度高
2016-06-22 12:50
525 查看
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf
SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9
原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理。
js代码:
注意点:这段js代码要放在head中,不然导致有的小图片执行到底下的js时之前已经加载完了。
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时之前已经加载完了。
相关文章推荐
- h5页面适配
- HTML5 canvas的相关问题
- H5单页面手势滑屏切换原理
- html5学习路线规划------莫名觉得还挺有爱滴。。。。
- 浮士德html5图片裁剪器2016开源版
- 使用 HTML5 WebSocket 构建实时 Web 应用
- HTML5的可以支持RTMP 但是无法播放RTSP 兼容浏览器
- HTML5 Canvas中 瞎鼓捣
- 【分享】WeX5的正确打开方式(2)
- HTML5 Web Workers 使用案例
- 基于HTML5 的人脸识别活体认证的实现方法
- HTML5 离线缓存详解(转)
- HTML5 离线缓存
- 使用h5的history改善ajax列表请求体验
- HTML5之初体验
- 移动混合开发之HTML5在移动开发中的准则
- 为什么我们要使用html5
- HTML5快速入门(三)—— 标签综合运用
- HTML5快速入门(三)—— 标签综合运用
- HTML5兼容IE方法