码迷,mamicode.com
首页 > Web开发 > 详细

HTML5文件加载进度管理

时间:2015-04-08 10:41:55      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

/**
     * 文件加载进度管理 
     */
    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文件加载进度管理

标签:

原文地址:http://www.cnblogs.com/rubekid/p/4401621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!