滚动翻页时图片懒加载失效的常见原因与解决方案
图片懒加载是前端性能优化中常用的手段，核心思想是延迟加载非视口区域的图片，减少初始页面加载的资源消耗。但在实际开发中，很多开发者会遇到滚动翻页场景下懒加载失效的问题，本文整理了常见的失效原因和对应的解决思路。
一、懒加载的基本原理
实现懒加载的核心逻辑通常是：监听页面的滚动事件，判断图片元素是否已经进入可视区域，当条件满足时，将图片的真实地址（通常存在自定义属性如data-src中）赋值给src属性触发加载。基础实现示例如下：
// 基础的懒加载实现示例
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
images.forEach(img => {
const rect = img.getBoundingClientRect();
// 判断图片是否进入可视区域
if (rect.top < viewHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
// 监听滚动事件，需要注意节流处理
window.addEventListener('scroll', () => {
lazyLoad();
});
// 初始加载时执行一次
lazyLoad();二、滚动翻页下懒加载失效的常见原因
1. 滚动事件监听对象错误
很多滚动翻页场景并不是监听window的滚动，而是监听内容容器的滚动，比如页面中某个div容器设置了固定高度和overflow: auto属性来实现内部滚动翻页。如果使用上述基础示例中监听window滚动的方式，当滚动发生在容器内部时，window的滚动事件不会被触发，自然无法执行懒加载逻辑。
解决方法：找到实际的滚动容器，为其绑定滚动事件，同时计算可视区域高度时也要使用容器的高度，而非window.innerHeight。
// 容器滚动场景的懒加载适配
const container = document.querySelector('.scroll-container');
const containerHeight = container.clientHeight;
container.addEventListener('scroll', () => {
const images = container.querySelectorAll('img[data-src]');
images.forEach(img => {
const rect = img.getBoundingClientRect();
// 相对于容器的位置判断，rect.top是相对于视口顶部，需要结合容器滚动距离计算
const scrollTop = container.scrollTop;
const imgTop = img.offsetTop;
if (imgTop - scrollTop < containerHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
});2. 动态新增的图片未纳入监听范围
滚动翻页通常会通过接口请求动态加载新的内容，包括新的图片元素。如果在初始加载完成后只获取了一次所有带data-src的图片，后续动态新增的图片不会被之前的查询逻辑获取到，自然无法触发懒加载。
解决方法：每次滚动事件触发时，重新查询当前所有未加载的带data-src的图片，或者在新增内容后手动触发一次懒加载逻辑。
3. 图片位置计算错误
使用getBoundingClientRect()获取的元素位置是相对于视口的，如果页面存在其他偏移（比如固定的导航栏、顶部提示栏），或者滚动容器不是window时，直接使用rect.top < viewHeight的判断会出现偏差，导致图片还没进入可视区域就触发加载，或者已经进入区域却没触发。
解决方法：根据实际的滚动容器和页面布局，调整位置计算的逻辑，比如结合容器的scrollTop、元素的offsetTop等属性计算相对位置。
4. 事件节流未处理导致性能问题
滚动事件触发频率极高，如果没有做节流处理，频繁执行懒加载的判断逻辑可能会导致页面卡顿，甚至在极端情况下出现逻辑执行异常，看起来像是懒加载失效。另外如果节流的时间设置过长，可能会导致图片进入可视区域后很久才触发加载，看起来像是失效。
解决方法：为滚动事件添加合理的节流逻辑，通常节流时间设置在100-200ms即可。
// 带节流的滚动监听
function throttle(fn, delay = 150) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
};
}
window.addEventListener('scroll', throttle(lazyLoad, 150));5. Intersection Observer API兼容或配置问题
现在很多项目会使用Intersection Observer API实现懒加载，相比传统的滚动事件监听，它性能更好且逻辑更简洁。但如果配置错误，比如root属性没有指定为实际的滚动容器，或者threshold、rootMargin设置不合理，也会导致懒加载失效。
// Intersection Observer 正确配置示例（容器滚动场景）
const container = document.querySelector('.scroll-container');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, {
root: container, // 指定滚动容器，不指定则默认是viewport
rootMargin: '0px',
threshold: 0.1
});
// 观察所有带data-src的图片
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});如果遇到兼容问题，需要确认目标浏览器是否支持该API，不支持的场景降级为传统的滚动事件监听方案。
6. 图片加载完成后未移除监听或标记
如果图片加载完成后没有移除data-src属性，或者没有取消对图片的观察（使用Intersection Observer时），会导致重复执行加载逻辑，甚至可能出现已经加载的图片再次被判断需要加载，引发异常。另外如果滚动事件监听没有在不需要时移除，也可能导致逻辑重复执行。
三、排查步骤建议
遇到懒加载失效问题时，可以按照以下步骤排查：
确认滚动事件是否触发：在滚动事件回调中打印日志，判断滚动时是否执行了懒加载相关逻辑
确认滚动容器：检查当前翻页的滚动是由哪个元素触发的，是否为
window还是某个内部容器检查动态内容：翻页加载新内容后，查看新图片是否带有正确的
data-src属性，是否被懒加载逻辑查询到验证位置计算：打印图片的位置参数和可视区域高度，验证判断条件是否符合预期
检查API使用：如果使用Intersection Observer，检查
root、threshold等配置是否正确
懒加载的实现并不复杂，核心是要结合实际的页面场景调整逻辑，尤其是滚动翻页这类动态加载内容的场景，需要充分考虑容器、动态元素、位置计算等因素，才能避免失效问题。