1. /**
  2. * 文件加载进度管理
  3. */
  4. DownloadUtils = function(options){
  5. options = options || {};
  6. this.init(options);
  7. };
  8.  
  9. DownloadUtils.prototype = {
  10. init:function(options){
  11. var _this = this;
  12. this.url = options.url;
  13. var xhr = new XMLHttpRequest();
  14. xhr.open("get", this.url, true);
  15. xhr.onload = function() {
  16. if (xhr.status == 200) {
  17. //TODO
  18. }
  19. }
  20. xhr.onloadend = function(){
  21. if(typeof options.onComplete == "function"){
  22. options.onComplete();
  23. }
  24. }
  25. xhr.onprogress = function(event){
  26. if(event.lengthComputable){
  27. if(typeof options.onProgress == "function"){
  28. options.onProgress(event.loaded, event.total);
  29. }
  30. }
  31. else{
  32. if(typeof options.onProgressError == "function"){
  33. options.onProgressError();
  34. }
  35. }
  36. }
  37. xhr.send();
  38. }
  39. };
  1. new DownloadUtils({
  2. url:images[i],
  3. onProgress:function(loaded, total){
  4. var percentage = (loaded * 100/ total) + '%';
  5. console.log(percentage);
  6. },
  7. onProgressError:function(){
  8. console.log("onProgressError");
  9. },
  10. onComplete:function(){
  11. console.log("onComplete");
  12. }
  13. });

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. Java学习----你的选择是什么-条件结构

    import java.util.Scanner; public class Student { public static void main(String[] args) { byte money ...

  2. ggts下载地址

    地址:http://spring.io/tools/ggts See All Versions可以下载更多版本,里面包含安装版和解压版

  3. 学c语言做练习之​统计文件中字符的个数

    统计文件中字符的个数(采用命令行参数) #include<stdio.h> #include<stdlib.h> int main(int argc, char *argv[] ...

  4. C++中的dll

    创建动态链接库 (DLL) 项目 在菜单栏上,依次选择“文件”.“新建”.“项目”. 在“新建项目”对话框的左窗格中,依次展开“已安装”.“模板”.“Visual C++”,然后选择“Win32”. ...

  5. 构建高可用web站点学习--前言

    前言:本人对于提高web站点的访问量等的有很浓厚的兴趣,也学习了将近一年的时间,希望能总结点东西,虽然很多东西都是从书籍和资料中学习的,而不是原创,但是这是我总结的一点感悟和进行的分类吧.而且可能思路 ...

  6. 怎么给qt程序添加版本信息

    windows下的可执行文件的属性中有版本这个信息,她含有版本信息,描述,版权等等.对于qt的程序,要含有这样的信息,该怎么办呢?那就如下操作吧:新建***.rc文件,在rc文件填入下的信息 #if ...

  7. Python 命令行非阻塞输入

    很久很久以前,系windows平台下,用C语言写过一款贪食蛇游戏,cmd界面,用kbhit()函数实现非阻塞输入.系windows平台下用python依然可以调用msvcrt.khbit实现非阻塞监听 ...

  8. GCC依赖库顺序问题

    今天在把linux下做的ipmsg移植到windows过程中,因为包含了一个开源库SimpleSocket,而这个库又引用了winsock2,没太注意就写下了下面的makefile: g++ -o t ...

  9. 【动态规划】XMU 1030 苦恼的月下老人

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1030 题目大意: 给定两个字符串的长度和内容,求最长公共子序列. 题目思路: [动态规 ...

  10. 读取Word文档的标题

    一:描述,将读取的文档标题添加到下拉框中 二:代码 #region 方法:得到Word文档标题的内容 public static List<string> GetTitles(int j, ...