页面文件加载进度条

当前版本:V1.3 最近更新:2014-3-6 组件作者:biggxie

支持功能

  • 1. 目前支持图片(jpg|gif|jpeg|png|bmp),样式以及js文件的加载;
  • 2. 可自定义圆形进度条的颜色,粗细,半径以及位置坐标;
  • 3. 支持一个回调函数。
  • 2014/09/02加入可选参数”hasdiv”,用来设置img元素是否被div元素包裹(见上方说明代码)
  • 2014/06/05兼容了移动端低版本applewebkit核心浏览器(此类浏览器加载css文件不支持onload事件),目前兼容的是applewebkit/534.xx之前的版本,如有更高版本的浏览器不兼容,请大家及时反馈,谢谢!
  • 2014/03/06修复了因文件加载失败而脚本停止运行的问题,加入一个可选参数silent(见上方说明代码)

DEMO演示

直线型进度条Demo

圆形进度条Demo

未压缩组件下载

JS代码

HTML代码

0% <— 普通的直线型进度条 —>

0% <— canvas圆形进度条,适用于高级浏览器 —>

页面调用(完整):

newLoadingFile({
“progbar”: “counter”,   // * 进度条元素ID
“numerical”: “bfb”,      //显示百分比数值的元素ID(可选值)
“silent”: “1″,              //文件加载失败是否提示错误:1提示,0不提示(可选值,默认为静默加载不提示)
“hasdiv”:”1″,             //图片是否被div元素包裹:1包裹,0不包裹(可选值,默认为包裹)
“assign”: “fix”,          //图片插入的元素ID(可选值,默认插入body元素中)
“circle”: {                                   //圆环的信息(可选值)
“stroke”: “#000″,     //圆环颜色(可选值,默认黑色)
“weigth”: 7,                               //圆环线条的粗细(可选值,默认为5px)
“radius”: 71,                             //圆心半径(可选值,默认为20px)
“pos_x”: 75,                            //圆中心点的X坐标(可选值,默认中心位置)
“pos_y”: 75                             //圆中心点的Y坐标(可选值,默认中心位置)
},
“files”: [                                 // * 需要加载的文件列表
{"link":"http://ossweb-img.qq.com/images/wuxia/act/a20131217way/right-tree.png","pert":"27","id":"picfile"},
{"link":"http://ossweb-img.qq.com/images/js/comm/tgadshow.min.js","pert":"35","id":"jsfile"},
{"link":"http://ossweb-img.qq.com/images/wuxia/web201308/web201308.css","pert":"100","id":"cssfile"}
]
},callback);

以上可选值都可以不写,详细介绍下files属性的参数:

  • link:文件的地址链接;
  • pert:文件相对应的百分比,最后一个文件对应的值必须是100;
  • id:可选参数,如果希望加载后的文件有独自的id值,方便写样式和为js留下钩子。