頁面loading：計算圖片預加載方法

HTML部分：

 

<div id="loading" class="loading position">
　　<div class="spinner">
　　　　<div class="bounce1"></div>
　　　　<div class="bounce2"></div>
　　　　<div class="bounce3"></div>
　　</div>
　　<p>loading...</p>
</div>

<!-- img要帶有data-src屬性-->

<img class="" id="" data-src="images/xxx.png" alt="">

 

css部分：

.loading{text-align: center; left:50%; font-size: 30px; z-index: 1;}

#loading{width: 100%; top:45%; margin-left: -50%;}
.loading p{color: #ff9244; font-weight: bold; font-family: Arial; font-size: 24px; }
.spinner { margin: 0 auto; width: 150px; text-align: center; }
.spinner > div { width: 30px; height: 30px; background-color:#ff9244; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes bouncedelay {
　　0%, 80%, 100% { -webkit-transform: scale(0.0) }
　　40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
　　0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0);} 
　　40% { transform: scale(1.0); -webkit-transform: scale(1.0);}
}

JS部分:

var version='1.0'

var resourceDir="images/";//存放圖片的相對路徑
var loadingImages=[];//存放圖片地址的數組
var TotalImagesJpg=1;//存放jpg圖片的總數
var TotalImagesPng=26;//存放png圖片的總數
if(TotalImagesJpg != 0){
　　for(var i=1;i<=TotalImagesJpg;i++){
　　　　loadingImages.push("a"+(i<10?"0"+i:i)+".jpg");
　　}
};
if(TotalImagesPng != 0){
　　for(var i=1;i<=TotalImagesPng;i++){
　　　　loadingImages.push("a"+(i<10?"0"+i:i)+".png");
　　}
}

loadResources(loadingImages,function (n, i, img) {
　　//music();
　　$("#loading p").html("loading&nbsp;" + Math.round(i * 100 / n) + "%");
　　if (n != i) return;
　　$("img").each(function(){
　　　　$(this).attr("src",$(this).data("src")+"?ver="+version);
　　});
　　//$("#loading").remove();
　　//$("#page1").show();
　　//init();
});
/*
函數名稱：loadResources()
功 能：圖片預加載
參 數：urls：包含全部圖片的數組、
progress：n=圖片總數、i=當前加載第幾張、img表明圖片地址 
返回結果：無
*/
function loadResources(urls, progress) {
　　var loadedCount = 0;
　　var loaded = function () {
　　　　++loadedCount;
　　　　if (progress) progress(urls.length, loadedCount, this);
　　};
　　for (var i = 0; i < urls.length; ++i) {
　　　　if (!urls[i]) {
　　　　loaded();
　　　　return;
　　}
　　var img = new Image();
　　img.onload = loaded;
　　img.onabort = loaded;
　　img.onerror = loaded;
　　img.src = resourceDir + urls[i] + "?ver=" + version;
　　}
};