HTML5文件加载进度管理
/**
* 文件加载进度管理
*/
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文件加载进度管理的更多相关文章
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- Android基于JsBridge封装的高效带加载进度的WebView
Tamic http://blog.csdn.net/sk719887916/article/details/52402470 概述 从去年4月项目就一直用起了JsBridge,前面也针对jsBrid ...
- OGG初始化之将数据从文件加载到Replicat
要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...
- 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花
DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...
- 高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完 ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- XMLHttpRequest 加载进度
XMLHttpRequest 相关资料请移步这里直接查看,我这里就不在赘述: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpReque ...
- pace.js和NProgress.js两个加载进度插件的一点小总结
这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...
随机推荐
- Jquery中$.post()与$.get()区别
1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...
- js监控键盘大小写事件
JavaScript键盘事件侦听 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事 件的执行顺序如 ...
- C语言基础学习基本数据类型-Char类型
char类型 char类型用于储存字母和标点之类的字符.但是在技术实现上char却是整数类型.为了处理字符,计算机使用一种数字编码,用特定的整数表示特定的字符.字符变量输入输出用%c符号.定义语法如下 ...
- a标签无disabled属性
<a class="button">确认</a> 我们经常会用a标签来设置按钮样式,如果点击它跳转页面,那么没有任何问题. 如果绑定了ajax事件,即点击后 ...
- Android 数据库读取数据显示优化 Application [6]
Application和Activity,Service一样是android框架的一个系统组件, 当android程序启动时系统会创建一个application对象,用来存储系统的一些信息. 通常我们 ...
- 用OpenGL简单编写的一个最简单贪吃蛇游戏
刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...
- UVALive 4394 String painter
这题搞了很久很久..弄得我都不想放上来了,但是想了想还是写上来吧,万一以后忘了怎么做了,又得搞很久很久了.题目是要求把一个字符串变成另外一个,每次可以选择一段字符串变成同一个字符,问最少用变多少次.本 ...
- perl 分析mysql binlog
binlog 日志格式: use `zjzc`/*!*/; SET TIMESTAMP=1476326343/*!*/; UPDATE `ProductAccess` pa SET pa.access ...
- Excel进行项目规划的好处
1.表格的方式 2.多个工作表 3.插入图片 4.清晰的规划 5.大众都能看得懂 6.辅助一些数据表设计,其他的流程设计 7.对项目该做什么,进度等等有一个明确的认识 8.项目管理,吃透需求,对进度把 ...
- Ubuntu 14.04 升级后 VPN 无法连接的问题
如果不知道怎么配置 VPN Server(IPSEC + L2TP),可以看这篇文章(英文). 问题表现: 将 Ubuntu 12.04 通过自动更新 —— do-release-upgrade —— ...