JQ封装图片预加载插件

我们知道，图片的加载，特别是资源较大的图片，加载相当耗费时间。为了提高用户体验，不得不使用图片预加载技术来提前加载，以提高用户在浏览时的流畅度。

先来弄明白图片的懒加载和预加载的不同：

1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

下面来封装一个预加载插件，同时讲解它的用法：

整个框架代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>preload</title>
     <style>
         *{margin:0;pading:0;}
         a{
             text-decoration: none;
         }
         .box {text-align:center;}
         .btn{
             display:inline-block;
             height:30px;
             line-height:30px;
             border:1px solid #ccc;
             background: #fff;
             padding:0 10px;
             margin-right:50px;
             color: #333;
         }
         .btn:hover{
             background: #eee;
         }
         /*进度条样式*/
         .loading{
             position:fixed;
             top:0;
             left:0;
             bottom:0;
             right:0;//撑满整个屏幕
             background: #eee;
             text-align: center;
             font-size:30px;
             font-weight:bold;
         }
         .progress{
             margin-top:300px;
         }
     </style>
 </head>
 <body>
 <!--无序预加载需要写进度条，当加载完毕后才能操作；
     有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...
 -->
     <div class="box">
         <img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000">
         <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="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
     <script src="js/preload.js"></script>
     <script>
         var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',
             'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',
             'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],
             index = 0,
             len = imgs.length;
             $progress = $('.progress');
               //有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法
 //            $.preload(imgs,{
 //                order:'ordered'
 //            });

         //调用无序预加载   --imgs 数组存放预加载的图片
         $.preload(imgs,{
             //每张图片加载(load事件)一次触发一次each()
             each:function (count) {
                 //进度条显示百分比进度
                 $progress.html(Math.round((count + 1) / len * 100) + '%');
             },
             //加载完毕
             all: function () {
                 $('.loading').hide();
                 document.title = '1/' + len;//初始化第一张
             }
         });
         //未封装成插件的无序预加载
 //        $.each(imgs,function(i,src){
 //            var imgObj = new Image();   //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++;//每加载完一张图片count加1
 //            });
 //
 //            imgObj.src = src;//缓存图片
 //        });
         //上一页，下一页按钮
         $('.btn').on('click',function(){
             if('prev' === $(this).data('control')){
                 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>

JQ插件部分：(preload.js)

 ;(function($){

     function PreLoad(imgs, options){
         //保存图片到数组
         this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
         this.opts = $.extend(PreLoad.defaults,options);

         // this._unordered();//如果只有无序预加载
         if(this.opts.order === 'ordered'){
             this._ordered();
         }else{
             this._unordered();//默认是无序预加载
         }
     };
     PreLoad.defaults = {
         order: 'unordered', //指定默认加载方式为无序
         each: null, //每一张图片加载完毕后执行
         all: null //所有图片加载完毕后执行
     };
     //有序预加载
     PreLoad.prototype._ordered = function(){
         var opts = this.opts,
             imgs = this.imgs,
             len = imgs.length,
             count = 0;

         load();
         function load(){
             var imgObj = new Image();

             $(imgObj).on('load error', function () {
                 //相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理
                 opts.each && opts.each(count);

                 if(count >= len){
                     //所有图片加载完毕
                     opts.all && opts.all();
                 }else{
                     //如果没加载完，继续调用自身加载下一张
                     load();
                 }
                 count++;
             });

             imgObj.src = imgs[count];//缓存图片
         };
     };

     //无序加载
     PreLoad.prototype._unordered = 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 && opts.each(count);

                 if(count >= len - 1){
                     //判断opts.all是否存在，存在则执行
                     opts.all && opts.all();
                 }
                 count++;
             });

             imgObj.src = src;//缓存图片
         });
     };

     //由于不用具体的对象去调用，因此用$.extend(object)挂载插件.
     $.extend({
         //preload为插件名
        preload: function(imgs,opts) {
            new PreLoad(imgs,opts);
        }
     });

 })(jQuery);

根据我们的需求来调用不同的插件，将未来可能用到的图片用Image()实例缓存起来。