移动端 loading="lazy" 能省流量但需满足三条件：必须设置宽高属性、srcset+sizes 共存、首屏图片设 loading="eager"；它不支持 background-image，动态插入图片时易失效，核心是让浏览器在正确时机用正确尺寸加载所需图片。
loading="lazy"在移动端是否真能省流量
能，但前提是它被正确触发且没被浏览器跳过。移动端 Safari 15.4+、Chrome/Edge 最新版都支持，但 iOS 15.4 以下版本会直接忽略 loading="lazy"，降级为立即加载——此时你写了也白写，流量照耗。关键不是“加了没”，而是“生效没”。
移动端必须配齐的三个配套属性
只写 loading="lazy" 在移动端大概率导致白屏、CLS（布局抖动）或大图误加载。必须同步满足：
-
width和height属性（或 CSS 中明确设置尺寸，如img { width: 100%; height: 300px; }），否则 Safari 和部分 Android WebView 会放弃懒加载逻辑，直接拉取原图 -
srcset+sizes必须共存：例如<img src="fallback.jpg" srcset="a-480w.jpg 480w, a-768w.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw" loading="lazy">。否则懒加载触发时视口宽度已固定，浏览器按 fallback 的src拉图，大概率是桌面尺寸大图 - 首屏图片必须显式设
loading="eager"或干脆不写——某些 SSR 渲染流程中，loading="lazy"可能被当成非关键资源跳过预渲染，导致首屏空白
为什么 background-image 不能用 loading="lazy"
loading="lazy" 是 HTML <img> 标签专属属性，对 CSS background-image 完全无效。你在样式里写 div { background-image: url("hero.jpg"); }，再加 loading="lazy" 到 div 上毫无作用。
真实可行的替代方案只有两个：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把背景图改用
<img>+object-fit: cover+ 定位模拟，这样就能用原生懒加载 - 对
background-image元素手动用IntersectionObserver监听，加载时动态设置element.style.backgroundImage = "url(...)"，但要注意避免重复监听和内存泄漏
动态插入图片时 lazy 容易失效
React/Vue 渲染、AJAX 加载列表、Infinite Scroll 场景下，图片是 JS 插入 DOM 的。如果插入时元素已在视口内，Firefox 某些版本仍会触发懒加载延迟，造成短暂白屏；而 Chrome 可能直接加载，行为不一致。
稳妥做法是：插入后立刻调用 observer.observe(imgEl)（如果你用 IntersectionObserver），或者对新插入的 <img> 显式检查 getBoundingClientRect().top ，符合条件就立即赋值 <code>src。
真正省流量的点不在“加没加 lazy”，而在“是否让浏览器在正确时机、用正确尺寸、加载真正需要的那张图”——这三者缺一不可，漏一个，懒加载就变成假懒加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
