移动端图片降级需HTML、JS、资源路径协同，navigator.connection.downlink是关键判断依据，的media和type属性无法识别网络状态，必须用JS动态设置src并提供断网保底资源。
移动端图片降级不是“加个 fallback 就完事”，而是必须在 HTML 结构、JS 判断、资源路径三者间做协同；不处理 navigator.connection 或忽略 downlink 数值，所谓“低网速适配”只是纸面逻辑。
为什么 media 和 type 对网络判断完全无效
media 属性只支持 CSS 媒体特性（如 (max-width: 768px)、(prefers-reduced-motion)），对 connection、save-data 等非标准媒体功能直接无视；type="image/webp" 只校验 MIME 类型是否被浏览器支持，和带宽无关。
常见错误现象：
- DevTools 里切到 “Slow 3G”，Network 面板仍只请求高清图，
-
matchMedia("(effective-type: 2g)")返回matches === false，说明该语法根本未实现 - 写了
loading="lazy"却没配srcset+sizes，Safari 直接加载 fallbacksrc大图
真正可行的 JS 降级：用 navigator.connection.downlink 动态写 src
现代浏览器（Chrome 61+、Edge 79+、Firefox 80+）暴露了 navigator.connection API，其中 downlink（单位 Mbps）比 effectiveType 更稳定，尤其在安卓 WebView 中后者常返回 undefined。
实操建议：
- HTML 中所有
src，用data-srcset-low="low.jpg"、data-srcset-high="high.jpg"存储备用路径 - 页面加载后立即执行：
if ("connection" in navigator && navigator.connection.downlink ，则写入低清资源 - 必须监听
navigator.connection.onchange，用户从 WiFi 切到地铁时能重新设置img.src - 避免只依赖
effectiveType === "2g"，部分低端安卓机返回值不可靠
断网与弱网下的 DOM 保底策略
JS 加载失败或网络中断时，不能让图片变白屏。核心是让 DOM 始终处于可运行状态：
-
src必须始终指向一个可用资源：推荐 1×1 透明 GIF（data:image/gif;base64,R0lGODlhAQABAAAAACw=）或 SSR 渲染出的真实小图 -
data-src必须在 HTML 源码中静态存在，不能靠 JS 注入——否则断网时它根本不存在 - 内联初始化代码：
<script>if ('IntersectionObserver' in window) { /* observe */ } else { document.querySelectorAll('img[data-src]').forEach(i => i.src = i.dataset.src); }</script> - 首屏关键图（如商品主图、登录头像）跳过懒加载，直接写死
src，不设data-src
移动端特别注意的兼容陷阱
很多降级逻辑在桌面跑得通，一上真机就失效：
-
loading="lazy"在 iOS 15.4 以下版本会被 Safari 完全忽略，降级为立即加载——必须配合width/height和srcset+sizes才可能触发 -
background-image不支持loading="lazy"，只能改用object-fit: cover，或手动用IntersectionObserver设置style.backgroundImage - 动态插入的图片（如 React/Vue 列表、AJAX 分页）容易因插入时已在视口内而跳过懒加载，需插入后立刻检查
getBoundingClientRect().top - 用
display: none隐藏容器？Safari 和多数 Android WebView 会彻底跳过该
最易被忽略的一点：降级不是“选一张小图”，而是确保从 HTML 解析阶段起，每个资源路径都经过网络条件校验，并且在 JS 失效时仍有确定性 fallback；否则你写的逻辑再漂亮，用户在地铁里打开页面，看到的还是空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
