日期:2014-05-16  浏览次数:20390 次

在显示页面之前加载图片和音乐
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;
}());