看视频记录一下。
预加载分为无序预加载和有序预加载。
demo1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片加载</title> <style> a{text-decoration: none;} .box{ 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; } .btn:hover{ background-color: #eee; } </style> </head> <body> <div class="box"> <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"> <p> <a href="javascript:;" class="btn" data-control="prev">上一页</a> <a href="javascript:;" class="btn" data-control="next">下一页</a> </p> </div> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script> var imgs=[ 'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg', 'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg', 'http://img2.3lian.com/img2009/06/16/024.jpg', 'http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg', 'http://www.taopic.com/uploads/allimg/111017/2136-11101G62S667.jpg', 'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg' ]; var index= 0, len=imgs.length; $('.btn').on('click',function(){ if('prev' === $(this).data('control')){//上一张 /*index--; if(index<0){ index=0; }*/ index=Math.max(0,--index);//返回最大值 }else{//下一张 index=Math.min(len-1,++index); } document.title=(index+1)+'/'+len; $('#img').attr('src',imgs[index]); }); </script> </body> </html> 没有使用预加载技术，以至于点击上一页或者下一页按钮的时候出现假死状态。用户体验不好。下面将其改成无序预加载效果。demo2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片加载</title> <style> html,body{ height: 100%; } a{text-decoration: none;} .box{ 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; } .btn:hover{ background-color: #eee; } .loading{ position: fixed; top:0; left: 0; width: 100%; height: 100%; background-color: #eee; text-align: center; font-size: 30px; } .progress{ margin-top: 300px; } </style> </head> <body> <div class="box"> <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"> <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> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script> var imgs=[ 'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg', 'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg', 'http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg', 'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg' ]; var index= 0, len=imgs.length, count=0, $progress=$('.progress'); //图片预加载就是加载这些图片，那么久需要将这些图片遍历出来 $.each(imgs,function(i,src){ var imgObj=new Image(); $(imgObj).on('load error',function(){ $progress.html(Math.round((count+1)/len *100)+'%'); if(count >= len-1){ $('.loading').hide(); document.title='1/'+len; } count++; }); imgObj.src=src; }); $('.btn').on('click',function(){ if('prev' === $(this).data('control')){//上一张 /*index--; if(index<0){ index=0; }*/ index=Math.max(0,--index);//返回最大值 }else{//下一张 index=Math.min(len-1,++index); } document.title=(index+1)+'/'+len; $('#img').attr('src',imgs[index]); }); </script> </body> </html> demo3.html将js写成jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片加载</title> <style> html,body{ height: 100%; } a{text-decoration: none;} .box{ 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; } .btn:hover{ background-color: #eee; } .loading{ position: fixed; top:0; left: 0; width: 100%; height: 100%; background-color: #eee; text-align: center; font-size: 30px; } .progress{ margin-top: 300px; } </style> </head> <body> <div class="box"> <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"> <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> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script src="preload.js"></script> <script> var imgs=[ 'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg', 'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg', 'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg' ]; var index= 0, len=imgs.length, $progress=$('.progress'); $.preload(imgs,{ each:function(count){ $progress.html(Math.round((count+1)/len *100)+'%'); }, all:function(argument) { $('.loading').hide(); document.title='1/'+len; } }); $('.btn').on('click',function(){ if('prev' === $(this).data('control')){//上一张 /*index--; if(index<0){ index=0; }*/ index=Math.max(0,--index);//返回最大值 }else{//下一张 index=Math.min(len-1,++index); } document.title=(index+1)+'/'+len; $('#img').attr('src',imgs[index]); }); </script> </body> </html> //图片预加载 (function($){ function PreLoad(imgs,options){ this.imgs = (typeof imgs === 'string')?[imgs]:imgs; this.opts = $.extend({},PreLoad.DEFAULTS,options); this._unoredered(); } PreLoad.DEFAULTS={ each:null,//每一张图片加载完毕后执行 all:null//所有图片加载完毕后执行 }; PreLoad.prototype._unoredered=function(){//无序加载 var imgs=this.imgs, opts=this.opts, count=0, len=imgs.length; $.each(imgs,function(i,src){ if(typeof src!='string') return; var imgObj=new Image(); $(imgObj).on('load error',function(){ opts.each && opts.each(count); if(count >= len-1){ opts.all && opts.all(); } count++; }); imgObj.src=src; }); }; $.extend({ preload:function(imgs,opts){ new PreLoad(imgs,opts); } }); })(jQuery);
