/**
* 文件加载进度管理
*/
DownloadUtils = function(options){
options = options || {};
this.init(options);
}; DownloadUtils.prototype = {
init:function(options){
var _this = this;
this.url = options.url;
var xhr = new XMLHttpRequest();
xhr.open("get", this.url, true);
xhr.onload = function() {
if (xhr.status == 200) {
//TODO
}
}
xhr.onloadend = function(){
if(typeof options.onComplete == "function"){
options.onComplete();
}
}
xhr.onprogress = function(event){
if(event.lengthComputable){
if(typeof options.onProgress == "function"){
options.onProgress(event.loaded, event.total);
}
}
else{
if(typeof options.onProgressError == "function"){
options.onProgressError();
}
}
}
xhr.send();
}
};
new DownloadUtils({
url:images[i],
onProgress:function(loaded, total){
var percentage = (loaded * 100/ total) + '%';
console.log(percentage);
},
onProgressError:function(){
console.log("onProgressError");
},
onComplete:function(){
console.log("onComplete");
}
});

HTML5文件加载进度管理的更多相关文章

  1. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  2. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  3. Android基于JsBridge封装的高效带加载进度的WebView

    Tamic http://blog.csdn.net/sk719887916/article/details/52402470 概述 从去年4月项目就一直用起了JsBridge,前面也针对jsBrid ...

  4. OGG初始化之将数据从文件加载到Replicat

    要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...

  5. 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

    DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...

  6. 高性能javascript 文件加载阻塞

    高性能javascript   javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完 ...

  7. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  8. XMLHttpRequest 加载进度

    XMLHttpRequest 相关资料请移步这里直接查看,我这里就不在赘述: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpReque ...

  9. pace.js和NProgress.js两个加载进度插件的一点小总结

    这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...

随机推荐

  1. php 文件操作之抓取网站图片

    $str= file_get_contents("http://v.qq.com/");preg_match_all("/\<img\s+src=.*\s*\> ...

  2. ADO.Net增、删、改、查

    数据访问 需要引用 对应命名空间:System.Data.SqlClient; SqlConnection:连接对象 SqlCommand:命令对象 SqlDataReader:读取器对象 Comma ...

  3. SVN管理工具Cornerstone之:创建分支、提交合并

      创建工程的分支: 步骤: 1.选择左下角仓库repositories中的工程名->选择trunk->点击Branch->在提示框里填写分支名称create, 2.在做上角work ...

  4. X-SCAN扫描器插件(MYSQL弱口令以及Mongodb未授权)

    因为在很多时候的内网扫描里面没有授权的WIN的好用的,稍微小点的弱口令扫描器(生成报告,多种服务),编译成了插件,再自己弄了个MONGODB的扫描插件用着. X-SCAN加载以后: MONGODB.p ...

  5. 禁止ultraedit自动检查更新的方法

    菜单栏: 高级->配置->应用程序布局->其他 取消勾选“自动检查更新”

  6. 为什么 O2O 领域融资额特别高?

    在36氪搜索“o2o”,融资额基本都是数千万乃至数亿,为什么这个领域的创业项目融资额如此之高?融到的钱一般用在什么地方? --------------------------------------- ...

  7. 舶来品P2P理财 能否成为“好声音”式好生意? 转

    华股财经 2012年11月29日 10:20:02 来源:互联网 字号:T|T   文/本刊记者 王奇 有数据显示,目前国内已有2000余家P2P公司,2007年至2011年上半年,其整体融资规模由2 ...

  8. delphi 自定义消息

    delphi 自定义消息     消息描述 Tmsg是   Windows系统用来记录描述一个具体的windows消息的.就是windows   用于封装应用程序及系统程序发生的消息,它是操作系统使用 ...

  9. Java---练习:文件切割与合并(1)

    实现对大文件的切割与合并. 按指定个数切(如把一个文件切成10份)或按指定大小切(如每份最大不超过10M),这两种方式都可以. 示例程序说明: 文件切割:把一个文件切割成多个碎片,每个碎片的大小不超过 ...

  10. Mysql 的字符编码机制、中文乱码问题及解决方案【转载】

    本文转载自:http://hi.baidu.com/huabinyin/item/7f51e462df565c97c4d24929.感谢作者及相关博主.        相信很多朋友都会对字符编码敬而远 ...