在显示页面之前加载图片和音乐,该怎么处理

在显示页面之前加载图片和音乐

JScript code

//(function(){
var LoadManager=function()
{
    this.resource;
    this.loaded=0;
    this.total;
    this.finish=false;
    this.percent=0;
    this.image=[];   //存储载入的所有图片，其下表为其ID号
    this.audio=[];
    this.img;      //用于临时存储图片
    this.ado;
    this.id;
};

LoadManager.prototype._load=function(props){
    var id,type,size,src;
    for(i in props)
    {
        if(i=="id")
           this.id=id=props[i];
        if(i=="type")
           type=props[i];
        if(i=="size")
           size=props[i];
        if(i=="src")
           src=props[i];
    }
    if(type=="img")
    {
        this.img = new Image();
        this.img.addEventListener("loaded", this._imgLoadedCallBack, false);
        this.img.src=src;
    }
    
    else if(type=="audio")
    {
        this.ado = new Audio(src);
        this.ado.addEventListener("canplay", this._audioCanplayCallBack, false);
        this.ado.addEventListener("error", this._audioErrorCallBack, false);
        this.ado.load();
        
    }
};
LoadManager.prototype._imgLoadedCallBack=function(){
    this.image[this.id]=this.img;
    this.loaded++;
    this.percent=this.loaded/this.total*100;
    if(this.percent==100)
       this.finish=true;
};
LoadManager.prototype._audioCanplayCallBack=function(){
    this.audio[this.id]=this.ado;
    this.imgLoadedCallBack();
};
LoadManager.prototype.loadAll=function(r){     //此处要求传入一个对象数组  其结构为 id  type  size  src ,id号是所有资源的唯一标识
    this.resource=r;
    this.total=this.resource.length;
    for(var i=0;i<this.resource.length;i++)
    {
        this._load(this.resource[i]);
    }
};

------解决方案--------------------
在页面显示之前还没有页面元素呢怎么加载
------解决方案--------------------
页面元素肯定要先加载
------解决方案--------------------
一你可以在加载前display: none;整个document
二你可以把img放到body最开头等img onload后再删除img元素再把下面的元素加载之前的图片浏览器加载过应该有缓存就不用担心重新载入的速度

其实不太清楚你想做什么
------解决方案--------------------

JScript code

(function(){
    
    var ImageLoader = function(images,loading,complete){
    /*
     *  images数据格式如下[{id:img1,src:image1.jpg,size:34},{id:img2,src:image2.jpg,size:50}]
     */
        this.countTotal = images.length;
        this.img = [];
        this.images = images;
        this.loading = loading;
        this.complete = complete;
        for(var i = 0;i < this.countTotal;i++){
            var imgObj = new Image();
            this.img.push(imgObj);
        }
        this.loadingIndex = 0;
    }
    ImageLoader.prototype.startLoader = function(){
            this._loadNext(this.loadingIndex);
    }
    
    ImageLoader.prototype._loadNext = function(index){
        this.img[index].src = this.images[index].src;
        var self = this;
        this.img[index].onload = function(){
            self.loading(this);
            if(self.loadingIndex < self.countTotal-1){
                self.loadingIndex++;
                self._loadNext(self.loadingIndex);
            }else{
                    self.complete();
            }
        }
    }
    window['ImageLoader'] = ImageLoader;
}());

在显示页面之前加载图片和音乐,该怎么处理

相关推荐