预加载

//预加载
var loadPic = (function () {
return {
init: function () {
this.setVars();
this.loadingPageImg();
this.loadingProgress();
},
imgArray: function () {
//加载时要替换的图片名称 start
return [
"images/final-1.png",
"images/final-2.png",
"images/final-3.png",
"images/final-4.png"
]
// end
},
setVars: function () {
this.imgNow = 1;
this.imgArr = loadPic.imgArray();
this.imgTotal = this.imgArr.length;
this.$progress = $('#loading .loadNum');
this.progressFunc = '';
this.progressTime = 25;
this.loadNum = 0;
},
loadingPageImg: function () {
if (loadPic.imgNow > loadPic.imgTotal) {
return;
};
var img = new Image();
img.src = loadPic.imgArray()[loadPic.imgNow - 1];
if (img.complete) {
loadPic.imgNow++;
loadPic.loadingPageImg();
} else {
img.onload = function () {
img.onload = null;
loadPic.imgNow++;
loadPic.loadingPageImg();
};
};
},
loadingProgress: function (i) {
var currP = 0;
if (loadPic.loadNum > 0) {
currP = loadPic.loadNum;
}
if (currP < parseInt(loadPic.imgNow / loadPic.imgTotal * 100)) {
currP++;
loadPic.loadNum = currP;
loadPic.$progress.html(currP+'%');
};
loadPic.progressFunc = setTimeout(loadPic.loadingProgress, loadPic.progressTime);
if (currP >=100) {
loadPic.$progress.html("");
clearTimeout(loadPic.progressFunc);
$('#loading').fadeOut();
$('#container').fadeIn();
}
}
};
}());
loadPic.init();