WEB开发者-分享WEB开发知识,让开发变得更简单!

jquery图片预加载插件教程

图片预加载插件

网站开发时经常需要在某个页面需要实现对大量图片的浏览,就会出现网页假死的现象,所以为了让图片在转换的时候不出现等待,我们最好是先让图片预先加载到本地,让用户无需等待过长的时间就能看到其他图片,优化用户体验

调用方式

请预先引入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);


本文链接:https://www.webkfz.com/WEBkF/jQuery/10781.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部