更多资本请Star：https://github.com/maidishike…

图片预加载插件

网站开辟时常常须要在某个页面须要完成对大批图片的阅读，就会涌现网页假死的征象，所以为了让图片在转换的时刻不涌现守候，我们最好是先让图片预先加载到当地，让用户无需守候太长的时候就可以看到其他图片，优化用户体验

挪用体式格局

请预先引入jquery

$.preload(imgs, { // imgs: 图片数组或字符串 ['1.jgp', '2.jpg'] 或许 '1.jpg'
  order: 'ordered', // 默许无序加载
  each: function(count) {
    // 单个图片加载完成
  },
  all: function() {
    // 一切图片加载完成
  }
});

插件代码

(function($) {
  function PreLoad (imgs, opts) {
    this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
    this.opts = $.extend({}, PreLoad.DEFAULTS, opts);
    if (this.opts.order === 'ordered') {
      this._ordered(); // 有序加载
    } else {
      this._unordered(); // 无序加载
    }
  }
  PreLoad.DEFAULTS = {
    order: 'unordered', //默许举行无序预加载
    each: null, // 单个图片加载完成后实行的要领
    all: null // 一切图片加载完成后实行的要领
  };

  PreLoad.prototype._ordered = function () { // 有序加载
    var imgs = this.imgs, len = imgs.length, count = 0, opts = this.opts;
    load();
    function load () {
      var img = new Image();
      $(img).on('load error', function() {
        opts.each && opts.each(count);
        if (count >= len) {
          // 一切图片加载终了
          opts.all && opts.all();
        } else {
          load();
        }
        count++;
      });
      img.src = imgs[count];
    }
  };
  PreLoad.prototype._unordered = function() { // 无序加载
    var imgs = this.imgs, len = imgs.length, count = 0, opts = this.opts;
    imgs.forEach(function(elem) {
      var img = new Image();
      $(img).on('load error', function(){
         opts.each && opts.each(count);
        if (count >= len -1) {
          opts.all && opts.all();
        }
        count++;
      });
      img.src = elem;
    });
  };
  $.extend({
    preload: function(imgs, opts) {
      new PreLoad(imgs, opts);
    }
  });
})(jQuery);