通过设置html，body的height为100%来解决子元素设置height为100%不管用的情况。

因为高度为百分比是继承父元素的。

单引号 放在判断前面，细节处理。    width设置一个，图片按照比列变化。

$.fn.extend -> $('#img').preload();

$.extend -> $.preload();

$.each(imgs,function(i,src)){

    var imgObj = new Image();

    $(imgObj).on('load error',function()){

        $progress.html(Math.round((count+1)/len *100)+'%');

            ...

    }

}

$.extend({

    preload:function(imgs,opts){   新增preload函数

        new PreLoad(imgs,opts);  //实例化

    }

})

新增插件

window.onload = function(){
preload();
showPic();
};
var imgs = [ 'img/banner.jpg',
        'img/pic01.jpg',
        'img/pic02.jpg',
        'img/pic03.jpg',
        'img/2017_5_14_Bing_.jpg',
        'img/2017_5_14_Bing_en-GB.jpg',
        'img/butterfly.jpg',
        'img/city.jpg',
        'img/desert.jpg',
        'img/flower.jpg',
        'img/flowers.jpg'
],
       index = 0,
   len = imgs.length,
   count = 0,
   progress = document.getElementsByClassName("progress")[0],
   loading = document.getElementsByClassName("loading")[0];

var imgObj = [];
function preload() {
for (var i=0; i < len; i++) {
imgObj[i] = new Image();
               imgObj[i].src = imgs[i];
imgObj[i].onload = function() {
progress.innerHTML = Math.round((count + 1) / len *100) + "%";
if (count >= len - 1) {
loading.style.display = "none";
document.title = "1/" + len;
}
count++;
}
imgObj[i].onerror = function() {
count++;
}
}
}

一、禁止事件冒泡:e.stopPropagation

1、$btn.on('click',function(){e.stopPropagation});

btn点击事件冒泡到document，在点击btn的时候会触发document的隐藏事件，所以要阻止btn的事件冒泡，是处理btn，而不是document.

一、插件写在局部作用域中，就是为了使它和外部的内容互不干涉，互不影响。但是js是没有局部作用域的，我们一般用闭包模拟局部作用域。

(function($) {

  // 面向对象

  function PreLoad(imgs, options) {

    this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

    this.opts = $.extend({}, PreLoad.DEFAULTS,options); // options和PreLoad.DEFAULTS这2个对象融合，生成新的对象，将新对象返回给opts保存下来。

    this._unordered(); // _表示只在函数内部使用，而不在外部调用

  }

  PreLoad.DEFAULTS = {

    each: null, // 每一张图片加载完毕后执行

    all: null  // 所有图片加载完毕后执行

  };

  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(count); // 如果opts.each存在，执行opts.each方法

        if (count >= len - 1) {

          opts.all && opts.all();

        }

        count ++;

      });

      imgObj.src = src;

    });

  }

  // 插件:①附在$.fn上（要选择一个元素）；②直接跟在jquery对象，是一个工具函数。(工具方法)

  // $.fn.extend -> $('#img').preload();

  $.extend({

    preload: function(imgs, opts) {

      new PreLoad(imgs, opts);

    }

  });

})(jQuery);

Math.max(a, b) //返回最大值
Math.min(a, b) // 返回最小值

一、Image对象有2个事件：load, error。

var imgObj = new Image(); // new实例化image对象。

$(imgObj).on('load error', function() {});

图片正常被加载之后，会触发load事件，如果没有被正常加载，会触发error事件。

一、Math.max(0, --index)，表示先index-1，再与0进行比较，取较大的那个值。

对应的有Math.min()方法。eg:Math.min(0, 1, 3, 5)，得到的是0。

预加载改成插件