Ajax加载后非click事件的Lazy-image jQuery脚本失效，如何委托？

这个问题太常见了——大部分懒加载脚本都是在页面初始渲染时，就把所有匹配的图片元素纳入监听范围（比如滚动检查、视口检测），但通过Ajax动态加载的新图片，不在初始的元素集合里，自然不会被懒加载逻辑处理。

既然不是点击这类可委托的用户事件，那我们得换个思路，核心就是在Ajax加载完成后，让懒加载脚本“认识”这些新图片，下面分几种场景给你具体方案：

一、如果你是自己写的Lazy-image脚本 #

把懒加载的初始化逻辑封装成一个可复用的函数，每次Ajax请求成功后，调用这个函数来处理新添加的图片。

举个简单的示例：

// 封装懒加载初始化函数
function setupLazyImages() {
  // 处理当前页面中所有未加载的懒图
  $('.lazy-image:not([data-loaded="true"])').each(function() {
    const $img = $(this);
    // 检查图片是否进入视口（这里需要你自己实现isInViewport方法）
    if (isInViewport($img)) {
      $img.attr('src', $img.data('src'));
      $img.attr('data-loaded', 'true');
      $img.removeClass('lazy-image');
    }
  });
}

// 页面初始加载时初始化
$(document).ready(function() {
  setupLazyImages();
  
  // 监听滚动事件，持续检查懒图（只绑定一次）
  $(window).on('scroll', setupLazyImages);
});

// Ajax请求示例
$.ajax({
  url: '/your-api-endpoint',
  method: 'GET',
  success: function(response) {
    // 将新内容插入容器
    $('#results').html(response);
    // 关键：调用初始化函数处理新图片
    setupLazyImages();
  }
});

注意：别把滚动监听逻辑写在初始化函数里，不然每次调用都会重复绑定，导致性能问题。

二、如果你用的是第三方懒加载插件 #

大部分成熟的懒加载插件（比如jQuery Lazy Load）都提供了重新初始化的方法，你只需要在Ajax成功后，针对新加载的图片重新调用插件初始化即可。

比如用jQuery Lazy Load的示例：

// 页面初始加载时初始化插件
$(document).ready(function() {
  $('.lazy-image').lazyload({
    threshold: 200, // 提前200px加载
    effect: 'fadeIn'
  });
});

// Ajax请求成功后
$.ajax({
  url: '/your-api-endpoint',
  success: function(response) {
    $('#results').html(response);
    // 重新初始化插件，处理新图片
    $('#results .lazy-image').lazyload({
      threshold: 200,
      effect: 'fadeIn'
    });
  }
});

不同插件的重新初始化方式可能略有不同，建议查看对应插件的文档确认细节。

三、更高效的方案：用IntersectionObserver API #

如果你不需要兼容太老的浏览器，推荐使用原生的IntersectionObserver API来实现懒加载，它不仅性能比滚动监听好，而且处理动态元素更方便——只需要在Ajax加载后，把新图片加入观察队列即可。

示例代码：

// 创建IntersectionObserver实例
const lazyImageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      // 替换真实图片地址
      img.src = img.dataset.src;
      // 图片加载完成后停止观察，节省资源
      img.onload = () => observer.unobserve(img);
    }
  });
});

// 初始观察所有懒图
$(document).ready(function() {
  $('.lazy-image').each(function() {
    lazyImageObserver.observe(this);
  });
});

// Ajax请求成功后
$.ajax({
  url: '/your-api-endpoint',
  success: function(response) {
    $('#results').html(response);
    // 观察新添加的懒图
    $('#results .lazy-image').each(function() {
      lazyImageObserver.observe(this);
    });
  }
});

总结一下：核心就是动态内容加载完成后，主动触发懒加载的初始化逻辑，把新元素纳入处理范围，因为懒加载不是基于用户触发的事件，所以传统的事件委托方式在这里不适用。

内容的提问来源于stack exchange，提问作者joe