以往加载图片都是在网络上预加载图片,但是有的时候只是个展示类的页面,图片都保存在本地了,由于图片没有加载上会暂时出现白屏的情况,于是,预加载本地图片就成了必然了,为了更好的用户体验。。
$(document).ready(function(){
var beforeOnLoad = document.getElementsByClassName("beforeOnLoad")[0];
var onLoad = document.getElementsByClassName("onload")[0];
onLoad.style.display = "none";
var imgArray = ["image/1.jpg","image/2.jpg","image/3.jpg"];
var imgArrayLen = imgArray.length;
var count = 0;
var xxxImgArray = [];
for (var i = 0; i < imgArrayLen; i++) {
xxxImgArray[i] = new Image();
xxxImgArray[i].src = imgArray[i];
xxxImgArray[i].onload = function(){
count++;
if(count == imgArrayLen){
zzz();
}
}
}
//记录开始加载图片时的时间
var beforeTime = (new Date()).getTime();
function zzz(){
//记录图片加载完的时间
var afterTime = (new Date()).getTime();
if(afterTime - beforeTime >= 1000){
xxx();
}else{
setTimeout(function(){
xxx();
},1000-(afterTime - beforeTime))
}
}
function xxx(){
onLoad.style.display = "block";
beforeOnLoad.style.display = "none";
}
})
只有当本地图片加载好之后,才会展现真正的页面了
div class="beforeOnLoad">
在加载图片时候显示的页面
</div>
<div class="onload">
展示页面内容
</div>
这就轻松搞定了。。