/图片无序预加载(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 lang="en"> <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 class="imgBox" id="imgBox"> ??????<img /> ????</div> ????<p id="control-img-btn"> ??????<a href="javascript:;" id="prevImg" class="prevImg">上一页</a> ??????<a href="javascript:;" id="nextImg" class="nextImg">下一页</a> ????</p> </body></html>jquery 图片预加载
原文地址：https://www.cnblogs.com/liveoutfun/p/9464023.html