图片预加载之无序加载

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>

其中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;}

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){});具体类似的用法案例见http://www.jb51.net/article/41605.htm

②var imgObj = new Image();具体属性、方法见http://www.w3school.com.cn/jsref/dom_obj_image.asp，

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!;