//图片预加载 //闭包模拟局部作用于 (function($){function Preload(imgs,options){this.imgs = (typeof imgs === 'string') ? [imgs]:imgs;this.opts = $.extend({},Preload.DEFAULTS,options);if(this.opts.order === 'ordered'){//有序加载this._ordered();}else{//无序加载this._unordered(); //下划线 只在当前内部使用，不外部调用 }}//默认参数Preload.DEFAULTS = {order:'unordered',//默认无序预加载each:null,//每一张图片加载完毕后执行all:null //所有图片加载完成后执行 }Preload.prototype._ordered = function(){let imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length;loadImg();//有序与加载function loadImg(){var imgObj = new Image();$(imgObj).on('load error',()=>{opts.each && opts.each(count);if(count >= len){//所有图片加载完成opts.all && opts.all();}else{//加载下一张 loadImg();}count++;})imgObj.src = imgsArr[count]}}Preload.prototype._unordered = function(){//无序加载let imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length;$.each(imgs,(i,src)=>{if(typeof src !='string'){return;}var imgObj = new Image();$(imgObj).on('load error',()=>{opts.each && opts.each(count);if(count >= len -1){opts.all && opts.all();}count ++;})imgObj.src = src;})};//插件封装 $.extend({preload:function(imgs,options){new Preload(imgs,options);}})})(jQuery);
调用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片预加载</title><style>.img-box,.btn{text-align: center;}.img-box img{width: 500px;height: 500px;}.btn a{display: inline-block;height: 30px;line-height: 30px;border: 1px solid red;border-radius: 5px;margin-right: 10px;padding: 0 10px;color: #333;text-decoration: none;}.btn a:hover{background: #ccc;}.loading{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;background: rosybrown;text-align: center;font-size: 30px;font-weight: 700;}.progress{margin-top: 300px;}</style> </head> <body><div class="box"><div class="img-box"><img src="http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg" alt=""></div><div class="btn"><a href="javascript:;" class="prev" data-controle="prev">上一页</a><a href="javascript:;" class="next" data-controle="next">下一页</a></div></div><!-- 预加载 --><div class="loading"><div class="progress">0%</div></div><script src="js/jquery-3.3.1.min.js"></script><script src="js/preload.js"></script><script>let imgsArr = ['http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg','http://pic1.win4000.com/wallpaper/7/57f9f84f0a29f.jpg','http://img17.3lian.com/d/file/201702/20/3a1744009d4b0e32a8a27e13299fc658.jpg','http://m.wendangwang.com/pic/ac555f0efbaa75d6a2b43778/7-810-jpg_6-1080-0-0-1080.jpg','http://pic170.nipic.com/file/20180620/27194830_202055800038_2.jpg']//调用插件 let index = 0,len = imgsArr.length,$progress = $('.progress');$.preload(imgsArr,{each:function(count){$progress.html(Math.round((count+1)/len*100) + '%'); },all:function(){$('.loading').hide();document.title = '1/' + len;}})$('.btn a').on('click',function(){if($(this).data('controle') === 'prev'){index = Math.max(0,--index)}else{index = Math.min(len - 1,++index)}document.title = (index) + '/' + len$('.img-box img').attr('src',imgsArr[index]);})</script> </body> </html>
