jQuery插件如何做懒加载

在 jQuery 生态里，“插件做懒加载”通常有两种理解，下面分别说明，并给出常见、实用的做法。

一、给已有的 jQuery 插件做「资源/脚本懒加载」

（页面一开始不加载插件，等用到时再加载）

做法 1：动态加载插件 JS 后再调用

function loadJQueryPlugin(cb) {
  if (window.MyPluginLoaded) {
    cb();
    return;
  }
  $.getScript('jquery.myplugin.js').done(function () {
    window.MyPluginLoaded = true;
    cb();
  });
}

// 使用
$('#btn').on('click', function () {
  loadJQueryPlugin(function () {
    $('#box').myPlugin();
  });
});

✅ 适合：

• 弹窗插件
• 图表插件
• 富文本插件
• 不常用功能

做法 2：IntersectionObserver + jQuery（推荐）

const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      $.getScript('jquery.lazy.plugin.js').done(() => {
        $(entry.target).lazyPlugin();
      });
      io.unobserve(entry.target);
    }
  });
});

$('.lazy-plugin').each(function () {
  io.observe(this);
});

✅ 适合：

• 长列表
• 图片懒加载插件
• 滚动才需要的插件

二、自己写一个「支持懒加载的 jQuery 插件」

（插件本身不立即执行，等元素进入视口再执行）

插件结构示例

(function ($) {
  $.fn.lazyInit = function (options) {
    const settings = $.extend({
      init: function () {}
    }, options);

    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          settings.init.call($(entry.target));
          io.unobserve(entry.target);
        }
      });
    });

    return this.each(function () {
      io.observe(this);
    });
  };
})(jQuery);

使用方式

$('.box').lazyInit({
  init: function () {
    this.html('已懒加载');
  }
});

三、图片懒加载（最常见）

如果你只是想“jQuery 做图片懒加载”：

<img class="lazy" data-src="a.jpg">

$('img.lazy').each(function () {
  const img = this;
  const io = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      img.src = img.dataset.src;
      io.disconnect();
    }
  });
  io.observe(img);
});

四、最佳实践建议

✅ 优先用 IntersectionObserver（性能好）
✅ jQuery 只负责 DOM 操作
✅ 插件脚本能懒加载就懒加载
✅ 避免页面初始化时全量加载插件

如果你能说一下：

• 是懒加载插件脚本？
• 还是插件内部功能懒执行？
• 或是图片/列表懒加载？

我可以直接给你一份可复制的完整示例。