图片预加载之无序加载

html代码：

 

<div class="preLoad_box">
	<img src="images/1.png"  alt="pic" id="img" width="1200px;"/>
		<p>
			<a href="javascript:;" class="btn" data-control="prev">上一页</a>
			<a href="javascript:;" class="btn" data-control="next">下一页</a>
		</p>
</div>
		
<div class="loading">
	<p class="progress">0%</p>
</div>	<img src="images/1.png"  alt="pic" id="img" width="1200px;"/>
		<p>
			<a href="javascript:;" class="btn" data-control="prev">上一页</a>
			<a href="javascript:;" class="btn" data-control="next">下一页</a>
		</p>
</div>
		
<div class="loading">
	<p class="progress">0%</p>
</div>

 

其中data-control的用法是用户自定义的，但必须是以data-开头，与后面Jquery中.data()方法相呼应。

css代码：

html,body{
	height:100%;
}
.preLoad{
	text-align:center;
}
.btn{
	display:inline-block;
	height:30px;
	line-height:30px;
	border:1px solid #ccc;
	background-color:#fff;
	padding:0 10px;
	margin-right:50px;
	color:#333;
	text-decoration:none;
}
a.btn:hover{
	color:#eee;
	color:#f00;
}
.loading{
	position:fixed;
	left:0;top:0;
	width:100%;
	height:100%;
	background-color:#eee;
	text-align:center;
	font-size:30px;
}
.progress{
	margin-top:300px;
}position:fixed;
	left:0;top:0;
	width:100%;
	height:100%;
	background-color:#eee;
	text-align:center;
	font-size:30px;
}
.progress{
	margin-top:300px;
}

jQuery代码：

 

<script type="text/javascript">
	var imgs = ["images/1.png",
		  "images/2.png",
		  "images/3.png",
		  "images/4.png",
		  "images/5.png",
		  "images/6.png"];
	var index = 0, //当前加载到哪张图片
	    len = imgs.length,//图片数组的长度
	    count = 0,//记录当前加载的图片数目
	    $progress = $(".progress");
			
	//图片预加载	
	    $.each(imgs,function (i,src){//其中i表示imgs图片数组的下标，src表示其src属性
	    	var imgObj = new Image();//创建一个Image对象，有多少个<img/>标签，就会创建多少个对象
					
		$(imgObj).on("load error",function(){//每张图片加载或出现错误时，执行以下操纵
			$progress.html(Math.round((count+1)/len*100) + "%");//对小数四舍五入
			if(count >= len - 1){
				/*	setTimeout(function(){//由于变化太快，只是为了方便观察
						$(".loading").hide();
						document.title = "1/" + len;
					},1000);*/   
							
				$(".loading").hide();
				document.title = "1/" + len;
							
			}
			count++;
		});
		imgObj.src = src;//一定要写在图片load之后
	    });
		
	//切换图片	
	   $(".btn").on("click",function(){
		if($(this).data("control") === "prev"){//上一张
		    index = Math.max(0,--index);//返回较大的数，相当于index--;if(index<0){index=0;}
		}else{//下一张
		    index = Math.min(len-1,++index);//返回较小的数
		}			
	       document.title = (index + 1) + '/' + len;//在title栏显示当前预览到第几张
	       $("#img").attr('src',imgs[index]);
	   });
</script>$.each(imgs,function (i,src){//其中i表示imgs图片数组的下标，src表示其src属性
	    	var imgObj = new Image();//创建一个Image对象，有多少个<img/>标签，就会创建多少个对象
					
		$(imgObj).on("load error",function(){//每张图片加载或出现错误时，执行以下操纵
			$progress.html(Math.round((count+1)/len*100) + "%");//对小数四舍五入
			if(count >= len - 1){
				/*	setTimeout(function(){//由于变化太快，只是为了方便观察
						$(".loading").hide();
						document.title = "1/" + len;
					},1000);*/   
							
				$(".loading").hide();
				document.title = "1/" + len;
							
			}
			count++;
		});
		imgObj.src = src;//一定要写在图片load之后
	    });
		
	//切换图片	
	   $(".btn").on("click",function(){
		if($(this).data("control") === "prev"){//上一张
		    index = Math.max(0,--index);//返回较大的数，相当于index--;if(index<0){index=0;}
		}else{//下一张
		    index = Math.min(len-1,++index);//返回较小的数
		}			
	       document.title = (index + 1) + '/' + len;//在title栏显示当前预览到第几张
	       $("#img").attr('src',imgs[index]);
	   });
</script>

①$.each(imgs,function(i,src){});具体类似的用法案例见http://www.jb51.net/article/41605.htm

 

 

<strong>②var imgObj = new Image();具体属性、方法见<a data-cke-saved-href="http://www.w3school.com.cn/jsref/dom_obj_image.asp" href="http://www.w3school.com.cn/jsref/dom_obj_image.asp">http://www.w3school.com.cn/jsref/dom_obj_image.asp</a>，</strong>

http://blog.csdn.net/hdchangchang/article/details/9036511

 

 

 

③$(this).data("control")：在元素上存放数据,返回jQuery对象。如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。
eg1：在一个div上存取数据

 

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

eg2：在一个div上存取名/值对数据

 

 

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;