本地图片的预加载

以往加载图片都是在网络上预加载图片，但是有的时候只是个展示类的页面，图片都保存在本地了，由于图片没有加载上会暂时出现白屏的情况，于是，预加载本地图片就成了必然了，为了更好的用户体验。。

$(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>

　　这就轻松搞定了。。

本地图片的预加载

相关推荐