Native lazy loading横向滚动场景失效：是否为设计如此？

这是浏览器原生懒加载当前的设计限制，并非Bug，但可以通过自定义逻辑解决。

原因说明 #

原生懒加载的核心检测逻辑是基于垂直方向的视口范围（含预加载阈值）判断元素是否需要加载。对于存在overflow-x的横向滚动容器，浏览器的视口可见性判断没有适配这种横向溢出场景，会误判容器内所有图片都处于“即将可见”的范围，因此会一次性加载全部图片，哪怕图片有固定尺寸。

可行的修复方案 #

• 自定义懒加载逻辑（推荐）：使用IntersectionObserver API（性能更优）或监听容器的scroll事件，结合getBoundingClientRect()判断图片是否进入横向滚动容器的可见区域，再动态设置图片的src/srcset属性。其中IntersectionObserver可以通过配置root参数指定横向滚动容器作为检测根元素，能精准识别元素在容器内的可见状态。
• 原生属性优化（仅缓解）：确保图片设置了明确的width、height属性并保持loading="lazy"，部分浏览器可能会基于尺寸做有限的优化，但无法彻底解决横向场景的误判问题。

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