JavaScript带筛选集合列表懒加载异常问题排查

我来帮你梳理下当前代码的问题，然后给出能解决问题的修正方案。

问题回顾 #

你在给带筛选功能的集合列表做懒加载：

• 无筛选时懒加载正常工作
• 筛选后，所有结果还带着.lazy类（样式为display: none），无法正常显示
• 尝试用URL参数检测和MutationObserver重置观察者后，又出现新问题：仅显示前3个元素，其余仍隐藏

先拆解下你之前代码的核心问题：

初始代码的问题 #

1. resetObserver里的选择器逻辑错误：collectionList.querySelectorAll(':not(.lazy) .swiper-slide') 不仅层级不对（.swiper-slide是.swiper-wrapper的直接子元素），而且逻辑搞反了——你应该监听带.lazy的元素，而非已经显示的元素。
2. 重置时没有重新初始化currentIndex，也没正确设置初始显示元素，导致观察者绑定完全错误。

更新后代码的问题 #

1. 作用域冲突：showNextBatch定义在外部，但currentIndex和items是if ('IntersectionObserver' in window)块内的局部变量，导致showNextBatch访问不到最新的变量值，逻辑直接失效。
2. 监听范围太广：MutationObserver监听整个document.body的子树变化，会被页面其他无关DOM更新触发，导致不必要的重置。
3. 重置逻辑不完整：虽然重新获取了items，但没有同步showNextBatch里的变量引用，后续懒加载无法正常触发。

修正后的解决方案 #

我重构了代码，统一初始化逻辑，修正作用域问题，同时优化了监听策略：

<script>
// 核心变量放在全局作用域（也可用IIFE封装避免污染，这里为简洁直接使用全局）
let observer;
let currentIndex = 0;
const batchSize = 3;
let collectionList;
let items;

// 批量显示下一组元素的逻辑
const showNextBatch = () => {
  const endIndex = currentIndex + batchSize;
  // 确保不超出当前筛选后的元素总数
  for (let i = currentIndex; i < endIndex && i < items.length; i++) {
    items[i].classList.remove('lazy');
  }
  currentIndex = endIndex;

  // 所有元素都显示后，断开观察者避免内存泄漏
  if (currentIndex >= items.length) {
    observer.disconnect();
  }
};

// IntersectionObserver配置
const observerOptions = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

// 统一的懒加载初始化函数（页面加载/筛选后重置都调用这个）
const initLazyLoad = () => {
  // 先断开之前的观察者
  if (observer) {
    observer.disconnect();
  }
  
  // 获取最新的列表容器和元素（筛选后DOM已更新）
  collectionList = document.querySelector('.swiper-wrapper');
  items = collectionList.querySelectorAll('.swiper-slide');
  
  // 重置当前索引
  currentIndex = 0;
  
  // 先把所有元素设为隐藏状态，再显示前batchSize个
  items.forEach(item => item.classList.add('lazy'));
  for (let i = 0; i < batchSize && i < items.length; i++) {
    items[i].classList.remove('lazy');
  }
  currentIndex = batchSize;
  
  // 创建新的观察者，监听剩余需要懒加载的元素
  observer = new IntersectionObserver(showNextBatch, observerOptions);
  for (let i = currentIndex; i < items.length; i++) {
    observer.observe(items[i]);
  }
};

// 页面加载时初始化懒加载
if ('IntersectionObserver' in window) {
  initLazyLoad();
  
  // 监听URL搜索参数变化（筛选条件变更）
  let currentUrl = new URL(window.location.href);
  setInterval(() => {
    const newUrl = new URL(window.location.href);
    if (currentUrl.search !== newUrl.search) {
      currentUrl = newUrl;
      // 延迟100ms执行，确保筛选后的DOM已经渲染完成
      setTimeout(initLazyLoad, 100);
    }
  }, 250);
  
  // 监听列表容器的子元素变化（如果筛选是通过DOM更新而非URL变化）
  const mutationObserver = new MutationObserver((mutations) => {
    // 只有当列表的子元素有添加/移除时，才重置懒加载
    const hasListChanged = mutations.some(mutation => 
      mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0
    );
    if (hasListChanged) {
      initLazyLoad();
    }
  });
  
  // 只监听swiper-wrapper的子元素变化，避免无关触发
  mutationObserver.observe(document.querySelector('.swiper-wrapper'), {
    childList: true
  });
} else {
  // 浏览器不支持IntersectionObserver时，直接显示所有元素
  collectionList = document.querySelector('.swiper-wrapper');
  items = collectionList.querySelectorAll('.swiper-slide');
  items.forEach(item => item.classList.remove('lazy'));
}
</script>

关键修正说明 #

• 作用域优化：把核心变量提升到全局，确保showNextBatch和initLazyLoad能访问到最新的元素列表和索引值。
• 统一初始化逻辑：用initLazyLoad函数封装所有初始化步骤，不管是首次加载还是筛选后重置，都调用这个函数，保证逻辑一致。
• 精准DOM监听：只监听.swiper-wrapper的子元素变化，避免页面其他DOM更新触发不必要的重置。
• URL变化处理：添加延迟执行，确保筛选后的DOM已经完全渲染完成，再初始化懒加载。
• 状态重置完善：每次初始化时先把所有元素设为隐藏，再显示前3个，确保筛选后的元素状态正确。

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