我们知道，图片的加载，特别是资源较大的图片，加载相当耗费时间。为了提高用户体验，不得不使用图片预加载技术来提前加载，以提高用户在浏览时的流畅度。
先来弄明白图片的懒加载和预加载的不同：
1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
下面来封装一个预加载插件，同时讲解它的用法：
整个框架代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>preload</title> 6 <style> 7 *{margin:0;pading:0;} 8 a{ 9 text-decoration: none; 10 } 11 .box {text-align:center;} 12 .btn{ 13 display:inline-block; 14 height:30px; 15 line-height:30px; 16 border:1px solid #ccc; 17 background: #fff; 18 padding:0 10px; 19 margin-right:50px; 20 color: #333; 21 } 22 .btn:hover{ 23 background: #eee; 24 } 25 /*进度条样式*/ 26 .loading{ 27 position:fixed; 28 top:0; 29 left:0; 30 bottom:0; 31 right:0;//撑满整个屏幕 32 background: #eee; 33 text-align: center; 34 font-size:30px; 35 font-weight:bold; 36 } 37 .progress{ 38 margin-top:300px; 39 } 40 </style> 41 </head> 42 <body> 43 <!--无序预加载需要写进度条，当加载完毕后才能操作； 44 有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张... 45 --> 46 <div class="box"> 47 <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000"> 48 <p> 49 <a href="javascript:;" class="btn" data-control="prev">上一张</a> 50 <a href="javascript:;" class="btn" data-control="next">下一张</a> 51 </p> 52 </div> 53 <!--进度条--> 54 <div class="loading"> 55 <p class="progress">0%</p> 56 </div> 57 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 58 <script src="js/preload.js"></script> 59 <script> 60 var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg', 61 'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png', 62 'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'], 63 index = 0, 64 len = imgs.length; 65 $progress = $('.progress'); 66 //有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法 67 // $.preload(imgs,{ 68 // order:'ordered' 69 // }); 70 71 //调用无序预加载 --imgs 数组存放预加载的图片 72 $.preload(imgs,{ 73 //每张图片加载(load事件)一次触发一次each() 74 each:function (count) { 75 //进度条显示百分比进度 76 $progress.html(Math.round((count + 1) / len * 100) + '%'); 77 }, 78 //加载完毕 79 all: function () { 80 $('.loading').hide(); 81 document.title = '1/' + len;//初始化第一张 82 } 83 }); 84 //未封装成插件的无序预加载 85 // $.each(imgs,function(i,src){
86 // var imgObj = new Image(); //Image()实例用于缓存图片 87 // 88 // $(imgObj).on('load error',function(){ 89 // $progress.html(Math.round((count + 1) / len * 100) + '%'); 90 // 91 // if(count >= len - 1){ 92 // $('.loading').hide(); 93 // document.title = '1/' + len; 94 // } 95 // count++;//每加载完一张图片count加1 96 // }); 97 // 98 // imgObj.src = src;//缓存图片 99 // }); 100 //上一页，下一页按钮 101 $('.btn').on('click',function(){ 102 if('prev' === $(this).data('control')){ 103 index = Math.max(0,--index); 104 }else{ 105 index = Math.min(len - 1,++index); 106 } 107 document.title = (index + 1)+'/' + len; 108 $('img').attr('src',imgs[index]); 109 }); 110 </script> 111 </body> 112 </html>
JQ插件部分：(preload.js)
1 ;(function($){ 2 3 function PreLoad(imgs, options){ 4 //保存图片到数组 5 this.imgs = (typeof imgs === 'string') ? [imgs] : imgs; 6 this.opts = $.extend(PreLoad.defaults,options); 7 8 // this._unordered();//如果只有无序预加载 9 if(this.opts.order === 'ordered'){ 10 this._ordered(); 11 }else{ 12 this._unordered();//默认是无序预加载 13 } 14 }; 15 PreLoad.defaults = { 16 order: 'unordered', //指定默认加载方式为无序 17 each: null, //每一张图片加载完毕后执行 18 all: null //所有图片加载完毕后执行 19 }; 20 //有序预加载 21 PreLoad.prototype._ordered = function(){ 22 var opts = this.opts, 23 imgs = this.imgs, 24 len = imgs.length, 25 count = 0; 26 27 load(); 28 function load(){ 29 var imgObj = new Image(); 30 31 $(imgObj).on('load error', function () { 32 //相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理 33 opts.each && opts.each(count); 34 35 if(count >= len){ 36 //所有图片加载完毕 37 opts.all && opts.all(); 38 }else{ 39 //如果没加载完，继续调用自身加载下一张 40 load(); 41 } 42 count++; 43 }); 44 45 imgObj.src = imgs[count];//缓存图片 46 }; 47 }; 48 49 //无序加载 50 PreLoad.prototype._unordered = function(){ 51 var imgs = this.imgs, 52 opts = this.opts, 53 count = 0, 54 len = imgs.length; 55 56 $.each(imgs,function(i,src){ 57 //判断图片数组中的每一项是否为字符串，不是字符串会导致出错，因此返回 58 if(typeof src != 'string') return; 59 60 var imgObj = new Image(); 61 62 $(imgObj).on('load error',function(){ 63 //判断opts.each是否存在，不存在则不执行 64 opts.each && opts.each(count); 65 66 if(count >= len - 1){ 67 //判断opts.all是否存在，存在则执行 68 opts.all && opts.all(); 69 } 70 count++; 71 }); 72 73 imgObj.src = src;//缓存图片 74 }); 75 }; 76 77 //由于不用具体的对象去调用，因此用$.extend(object)挂载插件. 78 $.extend({ 79 //preload为插件名 80 preload: function(imgs,opts) { 81 new PreLoad(imgs,opts); 82 } 83 }); 84 85 })(jQuery);
根据我们的需求来调用不同的插件，将未来可能用到的图片用Image()实例缓存起来。