图片预加载插件 preLoad.js

1.preLoad.js插件

 /*!
  * preLoad.js v1.0
  * (c) 2017 Meng Fangui
  * Released under the MIT License.
  */
 (function ($) {
     function preLoad(imgs, options) {
         //传入imgs参数是图片 还是 数组
         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(){
         var opts = this.opts,
         imgs = this.imgs,
         len = imgs.length,
         count = 0;
         load();
         //有序预加载
         function load(){
             //实例化Image对象
             var imgObj = new Image();
             //监听load和error事件
             $(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._unordered = function () {
         //无序加载
         var imgs = this.imgs,
             opts = this.opts,
             count = 0,
             len = imgs.length;

         $.each(imgs, function (i, src) {
             //判断图片路径是否是字符串
             if (typeof src != 'string') {
                 return;
             }
             //实例化Image对象
             var imgObj = new Image();
             //监听load和error事件
             $(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);

2、实例

2.1 html代码：

 <!DOCTYPE html>
 <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
         <title>图片预加载之无序加载</title>
         <link rel="stylesheet" type="text/css" href="css/main.css"/>
     </head>
     <body>
         <div class="container">
             <img src="http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg" alt="pic" id="img">
             <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="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/preload.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/main.js"></script>
     </body>
 </html>

2.2css代码（main.css）

 body{
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
 }
 .container{
     margin: 100px 0;
     text-align: center;
 }
 a{
     text-decoration: none;
 }

 .btn{
     display: inline-block;
     line-height: 30px;
     height: 30px;
     outline: 0;
     background-color: #eee;
     color: #333;
     padding: 5px 10px;
 }
 img{
     width: 640px;
 }

 .btn:hover{
     background-color: #ddd;
 }

 .loading{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #eee;
     text-align: center;
     font-size: 30px;
 }

 .progress{
     margin-top:300px;
 }

2.3js（main.js）

 $(function() {
     var imgs = [
         'http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg',
         'http://www.deskcar.com/desktop/fengjing/2011722123730/1.jpg',
         'http://www.33lc.com/article/UploadPic/2012-8/20128181071010672.jpg',
         'http://www.bbra.cn/Uploadfiles/imgs/2016/11/02/tu2/001.jpg',
         'http://www.ctskyril.com/Public/article/2015-05-29/556812ea53938_thumb.jpg',
         'http://www.doudouxitong.net/uploads/allimg/151221/1-15122114433V39.jpg',
         'http://d.5857.com/zirfengg_141208/001.jpg',
         'http://pic1.win4000.com/wallpaper/4/53fee27a01094.jpg',
         'http://pic1.win4000.com/wallpaper/1/56821f8bb1e23.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]);
     });
 });

3、运行上述代码时，需要注意文件路径

3.1 图片加载前

3.2图片加载后