/图片无序预加载(function($){function preload(imgs,fns){this.imgs=(typeof imgs==="string")?[imgs]:imgs;this.fns=$.extend({},preload.fns,fns);//把fns 覆盖到preload上 然后添加到{}返回if(this.fns.loadmethod=="unorderload"){//是无序 还是有序this._unorderload();}else{this._orderload();}}preload.fns={loadmethod:null,//有序还是无序的方式eachloadimg:null, //每张图片加载完所执行的函数allloadimg:null //所有图片加载完所要执行的函数}preload.prototype._orderload=function(){var imgs=this.imgs,len=imgs.length,fns=this.fns,num=0;function load(){var imgobj=new image();$(imgobj).on("load error",function(){fns.each && fns.each(); //存在 才会执行if(num<len){load(); //没有加载完就继续加载 函数执行是有顺序的}else{fns.allloadimg && fns.allloadimg();//加载完全部}});imgobj.src=imgs[num];num++;}load();}preload.prototype._unorderload=function(){var imgs=this.imgs,len=imgs.length,fns=this.fns,num=0;$.each(imgs,function(i,src){if(typeof src!="string") return;var imgobj=new image();$(imgobj).on("load error",function(){fns.eachloadimg && fns.eachloadimg(num,len);if( num==len-1){fns.allloadimg && fns.allloadimg();}num++;});imgobj.src=src;});}$.extend({ //给jquery上增加新函数preload:function(imgs,fns){new preload(imgs,fns);}});})(jquery);
使用方法
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="generator" content="editplus®"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <title>有序预加载</title> <style> *{margin: 0; padding: 0;} img{ width:100%; vertical-align:top; } .imgbox{ width:500px; margin:100px auto; } #previmg, #nextimg{ width:60px; font-size:15px; height:30px; line-height:30px; text-align:center; background: #686868; position:absolute; color:#000; text-decoration:none; margin-top:-50px; } #previmg{ left:40%; } #nextimg{ left:55%; } </style> <script src="js/jquery-3.2.1.js"></script> <script src="js/unorderload.js"></script> <script> $(function(){ var imgs=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"]; var len=imgs.length; var index=0; $.preload(imgs,{}); $("#control-img-btn").on("click","a",function(){ if($(this).hasclass("previmg")){ index=math.max(0,--index); //上一张 } else{ index=math.min(len-1,++index);//下一张 } $("#imgbox img").attr("src",imgs[index]); }); }); </script> </head> <body> <div id="imgbox"> <img /> </div> <p id="control-img-btn"> <a href="javascript:;" id="previmg">上一页</a> <a href="javascript:;" id="nextimg">下一页</a> </p> </body></html>
相关推荐：
jquery对象与原生dom对象之间的区别及转换
js对象是什么？js对象类型有哪些？js对象类型的总结
以上就是jquery中图片无序预加载的实现以及使用方法的详细内容。