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");
    }
});
时间: 2024-10-14 08:09:06

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

vue element-ui,上传文件加载进度条显示效果(使用定时器实现源码分享)

上传文件效果如图: 父组件相关代码 html <drag-upload ref='mychild' action="//接口相关地址" v-model="versionwareList" @submitUploadParent='formSubmit' @input='delUpload' :autoUpload="autoUpload" :visible="visible" :disabled="disabl

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务,网页加载等:如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1.html结构: <div id="loadBar01" class="loadBar"> <div> <span class="percent&qu

Html5游戏之KiwiJs(4)-资源加载进度

Kiwi.js中资源的加载是在Kiwi.State.preload方法中进行的,而关于加载进度State中有另外一个方法loadProgress来实现,所以要实现进度百分比显示,只需要重写loadProgress方法即可. 下面是Kiwi.js的loadProgress的API说明 重写loadProgress方法 loading.loadProgress = function(percent, bytesLoaded, file){ Kiwi.State.prototype.loadProgr

高性能javascript 文件加载阻塞

高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完毕之前,显示给用户的始终是一片空白,用户只能傻傻的看着屏幕等待脚本执行完毕.而且,如果页面引入多个脚本,那么后面的脚本文件必须等待前面的脚本文件下载完毕并且执行完毕之后才能开始下载并运行.不过IE8,FF,SAFARI,CHROME已经允许脚本文件可以同时下载,不过尽管如此,javascript脚本仍然

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

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NProgress.js NProgress是基于jquery的,且版本要 >1.8 API: NProgress.start() — 启动进度条 NProgress.set(0.4) — 将进度设置到具体的百分比位置 NProgress.inc() — 少量增加进度 NProgress.done() 

Chromium中网页加载进度条研究

1.     Shell.java中有成员变量:mProgressDrawable. 该成员变量在方法:onFinishInflate中被初始化. 在该类中有方法:onLoadProgressChanged,该方法中对进度条的值进行改变,并且对刷新完成事件进行反馈. 2.     上面的这个方法是在cc文件中被调用的. 上面方法对应的cc方法是shell_android.cc文件中的LoadProgressChanged方法. voidShell::LoadProgressChanged(Web

远景WEBGIS平台实现客户端SHP文件加载

远景WEBGIS平台的研发目前取得新进展,实现客户端shp文件的加载,可以不经过PC上的数据转换工具转换. 远景WEBGIS平台(RemoteGIS)是基于HTML5自主研发的新一代WEBGIS基础平台,它使用Javascript开发,具有良好的系统架构和高可扩展性.是全新的高效.专业.稳定的GIS平台. 现在正在开发在线产品"远景云GIS(RGIS Online)",提供在线的数据上传.符号配置.查询检索.空间分析.地图发布等功能,客户端Shp文件的加载功能是远景云GIS的一个重要部

JS文件加载:比较async和DOM Script

async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { return +(new Date()); } var t_s = now(); while(now() - t_s < 2000) { } 用sleep.php作为请求文件操作.代码: <?php sleep(3); echo 'var bb'; ?> 1. 一般script标签加载 <

prelaod场景,用来显示资源加载进度

phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas的元素,然后实例化一个 Game 对象就可以了. 复制代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>game</title> <