js图片预加载

// 获取文件名称后缀 、不带后缀
function getFilePath(filePath){
    var path = [];
    var pos = filePath.lastIndexOf(‘.‘);
    path[‘fileExt‘] = filePath.substring(pos);   //获取后缀
    path[‘fileName‘] = filePath.substring(0,pos);//获取文件名，不带后缀
    return path;
}

//实现一系列图片的预加载
//参数sources:图片信息关联数组
//参数callback:回调函数——图片预加载完成后立即执行此函数。
function preloadImages(sources,callback){   
    var newimages=[], 
        loadedimages=0;
    var sources = (typeof sources!="object")? [sources] : sources;
    function imageloadpost(){
        loadedimages++;
        if (loadedimages == sources.length){
            callback && callback(newimages);
        }
    }
    for (var i=0; i<sources.length; i++){
        newimages[i] = new Image();
        newimages[i].onload=function(){
            imageloadpost();
        };
        newimages[i].onerror=function(){
            imageloadpost();
        };
        newimages[i].src = sources[i];
    };
}

function LoadImages(opts){
    this.isFirst = true;
    this.currPage = 1;
    this.pageNum = opts.pageNum;
    this.imgData = {
        currPage:null,
        prevPage:null,
        nextPage:null
    };
}
LoadImages.prototype.init = function(){//初始化
    this.loadData(1,0);
};
LoadImages.prototype.goTo = function(toType){
    var _self = this;
    if(toType == 1){//下一页
        _self.imgData.prevPage = _self.imgData.currPage;
        _self.imgData.currPage = _self.imgData.nextPage;
        _self.currPage++;
        _self.showImg(1);
    }else if(toType == -1){//上一页
        _self.imgData.nextPage = _self.imgData.currPage;
        _self.imgData.currPage = _self.imgData.prevPage;
        _self.currPage--;
        _self.showImg(-1);
    }
};
LoadImages.prototype.showImg = function(showType){//显示图片
    var _self = this;
    var data = _self.imgData.currPage;
    if(_self.currPage == 1){
        $(".picwarp span.pre").addClass(‘hide‘);
    }else{
        $(".picwarp span.pre").removeClass(‘hide‘);//隐藏上一页按钮
    }
    if(data.num <= _self.pageNum*_self.currPage){
        $(".picwarp span.next").addClass(‘hide‘);
    }else{
        $(".picwarp span.next").removeClass(‘hide‘);//隐藏下一页按钮
        if(showType == 1 && ((_self.currPage+1) <= Math.ceil(data.num/_self.pageNum))){
            this.loadData(_self.currPage+1,1);
        }else if(showType == -1 && _self.currPage-1 >= 1){
            this.loadData(_self.currPage-1,-1);
        }
    }
    var list = data.urls;
    var curdd = null;
    var currPath = null; 
    for(var i=0;i<35 && i<list.length && i<_self.pageNum;i++){//遍历图片并显示
        currPath = getFilePath(list[i][0]);
        curdd = $(‘.moreImg dd:eq(‘+i+‘)‘);
        curdd.find(‘a‘).attr(‘href‘,list[i][0]);
        curdd.find(‘img‘).attr(‘src‘,currPath[‘fileName‘]+‘s‘+currPath[‘fileExt‘]);
    }
};
LoadImages.prototype.preLoadImg = function(list,callback){//预加载图片
    var currPath = null; 
    var imgageArr = [];
    for(var i=0;i<list.length;i++){
        imgageArr.push(list[i][0]);
        currPath = getFilePath(list[i][0]);
        imgageArr.push(currPath[‘fileName‘]+‘s‘+currPath[‘fileExt‘]);
    }
    preloadImages(imgageArr,callback);
};
LoadImages.prototype.loadData = function(pageIdx,loadType){//加载图片
    var _self = this;
    $.ajax({
        type : ‘POST‘,
        url : xxx.getPageImgList,
        data : {
            pageNum:_self.pageNum,
            currentPage:pageIdx
        },
        dataType : ‘json‘,
        success : function(data){
            if(loadType == 0){
                _self.imgData.currPage = data;
                _self.preLoadImg(data.urls,_self.showImg(1));
            }else if(loadType == 1){
                _self.imgData.nextPage = data;
                _self.preLoadImg(data.urls);
            }else if(loadType == -1){
                _self.imgData.prevPage = data;
                _self.preLoadImg(data.urls);
            }
        }
    });
};
//创建实例
var loadImgPage = null;
    loadImgPage = new LoadImages({pageNum:35});