Angular 12中图片loading="lazy"属性不生效问题

我给所有屏幕外图片（包括页脚图片）都添加了loading="lazy"属性，分别测试了客户端渲染（CSR）和Angular Universal服务器端渲染两种模式，但所有图片在页面加载初期就全部加载完成，完全不需要滚动触发。代码示例如下：

<img src="{{product.featured_image.mobile}}" alt="" loading="lazy" width="100" height="100">

可能的原因及解决办法 #

• 浏览器预加载策略：主流浏览器会预加载视口附近（通常几百像素范围内）的图片，哪怕它们当前不在屏幕内。如果你的图片距离视口较近，浏览器会直接加载，这属于预期行为。可以把图片放到离视口更远的位置测试。
• 图片尺寸过小：你设置的图片宽高仅为100px，这类小尺寸图片的加载开销极低，浏览器可能跳过懒加载直接加载。换成大尺寸图片就能看到懒加载效果。
• Angular渲染逻辑干扰：Angular在SSR或CSR模式下，可能提前解析并触发图片加载。可以改用Angular官方的NgOptimizedImage指令，它针对Angular场景做了专门的懒加载优化，能更好适配SSR环境。
• 浏览器兼容性或环境问题：确认测试用的浏览器版本支持loading="lazy"，另外部分浏览器在HTTP环境（比如本地开发）下的懒加载行为可能和HTTPS环境有差异。
• CSS布局导致的误判：如果图片所在容器的布局异常（比如未设置正确尺寸、使用position: fixed等特殊定位），会让浏览器误判图片是否在视口范围内。检查父元素的CSS样式，确保布局符合预期。

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