无限滚动列表图片懒加载核心是按需加载，即仅在图片即将进入视口时才请求渲染；推荐使用Intersection Observer API监听容器是否相交，配合data-src与占位图实现高效加载，并动态注册新增节点，同时提供scroll降级方案及加载失败兜底、响应式适配等优化。
无限滚动列表中的图片懒加载，核心是“按需加载”——只在图片即将进入视口时才开始请求和渲染，避免一次性加载大量图片导致页面卡顿、流量浪费和首屏变慢。
监听滚动 + Intersection Observer 判断是否进入可视区
现代推荐方式是使用 Intersection Observer API，它比监听 scroll 事件更高效、无性能风险，且原生支持，无需依赖第三方库。
- 为每个图片的容器（如
<div class="img-wrapper">）设置一个空的data-src属性，真实地址存在这里；<img>标签初始用占位图或空白 src（如src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="） - 创建 Observer 实例，监听所有图片容器是否与视口相交（threshold 可设为 0.1 表示 10% 进入即触发）
- 回调中获取对应元素的
data-src，赋值给img.src，并可移除监听（或解绑已加载项）以提升性能
配合无限滚动：动态注册新图片节点
当用户滚动到底部、触发下一页数据加载后，新插入的列表项里可能包含带 data-src 的图片。这时不能忽略它们——需要让 Observer 主动“观察”新增节点。
- 每次 append 新列表项后，遍历其中所有待懒加载的
<img>或其父容器，调用observer.observe(el) - 更稳妥做法：把懒加载逻辑封装成函数（如
initLazyLoad(imgEl)），在插入新 DOM 后统一调用 - 避免重复 observe 同一元素（可用
observer.takeRecords()或维护已加载 Set 判断）
降级方案：scroll + getBoundingClientRect（兼容老浏览器）
若需支持 IE 或某些 WebView，可用传统方式，但要注意节流和计算开销：
立即学习“前端免费学习笔记（深入）”；
- 监听
window.onscroll（建议用requestAnimationFrame节流） - 遍历所有未加载的图片元素，调用
el.getBoundingClientRect() - 判断
top < window.innerHeight && bottom > 0（即部分在视口内） - 满足条件则加载，并从待处理队列中移除该元素
额外优化点
让懒加载更健壮、用户体验更好：
-
加载失败兜底：监听
img.onerror，显示默认占位图或错误提示 -
加载中状态：用 CSS 类（如
.loading）配合过渡动画，提升感知速度 -
响应式适配：结合
srcset和sizes，让懒加载图片也适配不同屏幕宽度 -
SEO 友好：服务端仍可输出完整
img标签（含src），前端 JS 加载时再覆盖，确保爬虫能抓取
