页面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{ 100%; top:45%; margin-left: -50%;}
.loading p{color: #ff9244; font-weight: bold; font-family: Arial; font-size: 24px; }
.spinner { margin: 0 auto; 150px; text-align: center; }
.spinner > div { 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;
　　}
};