滚动翻页时JS图片懒加载失效的原因与解决方案

图片懒加载是前端优化中常用的手段，通过延迟加载非视口区域的图片，减少初始页面加载的资源消耗，提升用户体验。但很多开发者在实现滚动翻页场景下的懒加载时，会遇到新增图片无法触发加载的问题，本文将从原理出发分析失效原因，并给出可落地的解决方案。

一、懒加载的基本实现原理

标准懒加载的核心逻辑是监听页面滚动事件，判断图片是否进入浏览器视口，当满足条件时将图片的data-src属性值赋值给src属性，触发图片加载。基础实现代码如下：

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');

function checkLazyLoad() {
  const windowHeight = window.innerHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  lazyImages.forEach(img => {
    // 获取图片距离页面顶部的距离
    const imgTop = img.getBoundingClientRect().top + scrollTop;
    // 判断图片是否进入视口（提前200px触发加载）
    if (imgTop < scrollTop + windowHeight + 200) {
      const src = img.getAttribute('data-src');
      if (src) {
        img.src = src;
        // 加载完成后移除data-src属性，避免重复判断
        img.removeAttribute('data-src');
      }
    }
  });
}

// 监听滚动事件
window.addEventListener('scroll', checkLazyLoad);
// 初始加载时执行一次
checkLazyLoad();

二、滚动翻页场景下懒加载失效的常见原因

1. 新增图片未纳入监听范围

滚动翻页通常通过AJAX请求获取新的内容片段，再动态插入到页面中。如果初始化懒加载逻辑时仅获取了初始页面的img[data-src]元素，后续动态新增的图片不会被包含在lazyImages集合中，自然无法被滚动监听逻辑检测到。

例如以下翻页插入逻辑就会导致问题：

// 翻页加载新内容
function loadMoreContent() {
  fetch('https://www.ipipp.com/api/getMoreContent?page=2')
    .then(res => res.json())
    .then(data => {
      // 动态插入包含新图片的片段
      const container = document.getElementById('content-container');
      container.innerHTML += data.html;
      // 没有重新获取懒加载图片集合，新增图片不会被检测
    });
}

2. 滚动监听绑定对象错误

很多场景下翻页容器不是window，而是自定义的滚动容器（比如设置了overflow: auto的div）。如果仍然将滚动事件绑定在window上，计算图片位置时使用的window.innerHeight、window.pageYOffset和图片实际的滚动容器属性不匹配，就会导致位置判断错误，新图片始终无法满足条件。

3. 图片位置计算逻辑未适配动态内容

动态插入的新图片，其getBoundingClientRect().top的值是相对于当前视口的，如果计算位置时没有正确结合滚动容器的滚动偏移量，会出现位置判断偏差。比如滚动容器不是window时，仍然使用window.pageYOffset计算偏移，就会导致判断结果错误。

4. 事件监听器被重复绑定或未正确移除

部分开发者会在每次翻页后重新绑定滚动事件，或者没有对滚动事件做节流处理，导致事件触发过于频繁，甚至出现逻辑冲突。另外如果翻页后旧的事件监听器没有正确清理，也可能出现判断逻辑异常。

三、针对性的解决方案

1. 动态更新懒加载监听集合

每次翻页插入新内容后，重新获取当前页面所有的img[data-src]元素，更新需要监听的图片集合。为了避免重复处理已经加载的图片，可以在图片加载完成后移除data-src属性，筛选时仅选择仍存在该属性的图片。

优化后的翻页逻辑如下：

let lazyImages = [];

// 更新懒加载图片集合
function updateLazyImages() {
  lazyImages = Array.from(document.querySelectorAll('img[data-src]'));
}

function checkLazyLoad() {
  const windowHeight = window.innerHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 过滤掉已经加载的图片
  lazyImages = lazyImages.filter(img => {
    const src = img.getAttribute('data-src');
    if (!src) return false;
    
    const imgTop = img.getBoundingClientRect().top + scrollTop;
    if (imgTop < scrollTop + windowHeight + 200) {
      img.src = src;
      img.removeAttribute('data-src');
      return false;
    }
    return true;
  });
}

// 翻页加载逻辑
function loadMoreContent() {
  fetch('https://www.ipipp.com/api/getMoreContent?page=2')
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById('content-container');
      container.innerHTML += data.html;
      // 插入新内容后更新懒加载图片集合
      updateLazyImages();
    });
}

// 初始化
updateLazyImages();
window.addEventListener('scroll', checkLazyLoad);
checkLazyLoad();

2. 适配自定义滚动容器

如果翻页内容在自定义滚动容器内，需要将滚动事件绑定到该容器，同时使用容器的属性计算位置和偏移量。示例如下：

const scrollContainer = document.getElementById('scroll-container');
let lazyImages = [];

function updateLazyImages() {
  lazyImages = Array.from(scrollContainer.querySelectorAll('img[data-src]'));
}

function checkLazyLoad() {
  const containerHeight = scrollContainer.clientHeight;
  const containerScrollTop = scrollContainer.scrollTop;
  
  lazyImages = lazyImages.filter(img => {
    const src = img.getAttribute('data-src');
    if (!src) return false;
    
    // 计算图片相对于滚动容器顶部的距离
    const imgTop = img.offsetTop;
    if (imgTop < containerScrollTop + containerHeight + 200) {
      img.src = src;
      img.removeAttribute('data-src');
      return false;
    }
    return true;
  });
}

// 滚动事件绑定到自定义容器
scrollContainer.addEventListener('scroll', checkLazyLoad);
// 初始加载
updateLazyImages();
checkLazyLoad();

3. 使用Intersection Observer API优化实现

传统的滚动监听需要手动计算位置，兼容性也有一定限制，现代浏览器支持Intersection Observer API，可以自动观察元素是否进入视口，无需手动计算位置，也更适配动态新增元素。实现方式如下：

// 创建观察器
const lazyLoadObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      if (src) {
        img.src = src;
        img.removeAttribute('data-src');
        // 加载完成后停止观察该元素
        lazyLoadObserver.unobserve(img);
      }
    }
  });
}, {
  rootMargin: '200px', // 提前200px触发加载
  threshold: 0
});

// 更新观察列表的方法
function updateLazyImages() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(img => {
    lazyLoadObserver.observe(img);
  });
}

// 翻页后调用更新方法
function loadMoreContent() {
  fetch('https://www.ipipp.com/api/getMoreContent?page=2')
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById('content-container');
      container.innerHTML += data.html;
      // 新内容插入后重新观察所有未加载的懒加载图片
      updateLazyImages();
    });
}

// 初始化
updateLazyImages();

如果项目需要兼容旧版浏览器，可以引入Intersection Observer的polyfill，或者将两种方法结合使用。

4. 滚动事件节流处理

滚动事件触发频率极高，如果不做节流处理，会大量消耗性能，甚至导致逻辑执行异常。可以给滚动回调添加节流逻辑：

let isScrolling = false;
function throttleCheckLazyLoad() {
  if (isScrolling) return;
  isScrolling = true;
  requestAnimationFrame(() => {
    checkLazyLoad();
    isScrolling = false;
  });
}

window.addEventListener('scroll', throttleCheckLazyLoad);

四、总结

滚动翻页场景下懒加载失效的核心原因是动态新增的内容没有被纳入懒加载的检测范围，或者位置计算、事件绑定的逻辑没有适配翻页场景。通过动态更新监听集合、适配滚动容器、使用Intersection Observer API等方式，可以有效解决这类问题。实际开发中建议优先使用Intersection Observer API，代码更简洁，性能也更好。

懒加载失效 滚动翻页 图片懒加载优化 IntersectionObserver 动态加载图片