//图片预加载 //闭包模拟局部作用于 (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>