/**
* 文件加载进度管理
*/
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. extjs中datefield组件的使用

    xtype: 'datefield', id: 'dateShangmfa', name: 'dateShangmfa', fieldLabel: '日期',//设置标签文本 editable: fa ...

  2. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  3. jquery easy ui 学习 (7) TreeGrid Actions

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. LightOJ 1317 第六周比赛A题

    A - A Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu   Description Y ...

  5. centos下安装cdh5

    http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个   yum clean all yum update     1.保证selinux关闭  /e ...

  6. Javascript返回顶部

    控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...

  7. 终端编写c程序

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:JackAlan链接:http://www.zhihu.com/question/21483375/answer/322672 ...

  8. 转:Top 10 Algorithms for Coding Interview

    The following are top 10 algorithms related concepts in coding interview. I will try to illustrate t ...

  9. hdu 5100 Chessboard

    http://acm.hdu.edu.cn/showproblem.php?pid=5100 在比赛时没看懂题就没看,结束之后,看了解题报告才知道怎么做. 解题报告: 首先,若n<k,则棋盘连一 ...

  10. 【转】Android Studio安装配置学习教程指南 Gradle基础--不错

    原文网址:http://www.linuxidc.com/Linux/2015-02/113890p4.htm 其实很早之前也写了一篇Gradle的基础博客,但是时间很久了,现在Gradle已经更新了 ...