前端性能优化 - 图片预加载
图片预加载
提前加载用户所需的图片
preload.js
/** * 图片预加载 */ (function($){ function PreLoad(imgs,options){ this.imgs = (typeof imgs === 'string') ? [imgs] : imgs; this.opts = $.extend({},PreLoad.DEFAULTS,options); if(this.opts.order == 'ordered'){ this._oredered(); }else{ this._unoredered(); } } PreLoad.DEFAULTS = { order:'unoredered', //默认情况下使用无序预加载 each:null, //每一张图片加载完毕后执行 all:null //所有图片加载完毕后执行 }; PreLoad.prototype._oredered = function(){ //有序加载 var imgs = this.imgs, opts = this.opts, count = 0, len = imgs.length; //有序预加载 load(); function load(){ var imgObj = new Image(); $(imgObj).on('load error',function(){ opts.each && opts.each(count); if(count >= len){ //所以图片已经加载完毕 opts.all && opts.all(); }else{ load(); } count ++; }); imgObj.src=imgs[count]; } }; 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);
一、无序预加载
加载动画loading页，把所有图片都加载完再展示页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载</title> <style> a{ text-decoration: none; color:#333; } a:hover{ background-color: #eee; } .loading{ width:100%; height: 100%; background-color: #fff; position: fixed; top:0; left: 0; text-align: center; font-size: 30px; } .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; } </style> </head> <body> <!--加载页--> <div class="loading"> <p class="progress">0%</p> </div> <div class="box"> <img src="http://seopic.699pic.com/photo/50060/7842.jpg_wh1200.jpg" alt="pic" id="img" style="width:800px;"> <p> <a href="javascript:void(0);" class="btn" data-control="prev">上一页</a> <a href="javascript:void(0);" class="btn" data-control="next">下一页</a> </p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/preload.js"></script> <script> var imgs=[ 'http://seopic.699pic.com/photo/50060/7842.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50001/3132.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50060/5656.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50060/5654.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50062/2175.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50061/7609.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50059/0941.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50041/6756.jpg_wh1200.jpg' ]; var index = 0, len = imgs.length, $progress = $('.progress'); $.preload(imgs,{ each:function(count){ $progress.html(Math.round((count+1)/len*100)+'%'); }, all:function(){ $(".loading").hide(); document.title = '1/'+len; } }); $(".btn").on('click',function(){ if($(this).data('control') == 'prev'){//上一张 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>
二、有序预加载
图片按照顺序 一张张加载，加载完第一张 再加载第二张。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载</title> <style> a{ text-decoration: none; color:#333; } a:hover{ background-color: #eee; } .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; } </style> </head> <body> <div class="box"> <img src="http://seopic.699pic.com/photo/50060/7842.jpg_wh1200.jpg" alt="pic" id="img" style="width:800px;"> <p> <a href="javascript:void(0);" class="btn" data-control="prev">上一页</a> <a href="javascript:void(0);" class="btn" data-control="next">下一页</a> </p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/preload.js"></script> <script> var imgs=[ 'http://seopic.699pic.com/photo/50060/7842.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50001/3132.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50060/5656.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50060/5654.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50062/2175.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50061/7609.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50059/0941.jpg_wh1200.jpg', 'http://seopic.699pic.com/photo/50041/6756.jpg_wh1200.jpg' ]; var len = imgs.length, index = 0; //有序预加载 $.preload(imgs,{ order:'ordered' }); $(".btn").on('click',function(){ if($(this).data('control') == 'prev'){//上一张 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>
