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});

 

js圖片預先載入