弱网下自动切换低质量图片的 Network API 实现方法

本文介绍了如何在弱网环境下通过 Network Information API 智能降级图片质量以提升加载速度与用户体验：不依赖事后错误监听，而是前置利用 `navigator.connection.effectiveType`（如 'slow-2g'、'3g'、'4g'）动态决策加载缩略图、WebP 压缩图或原图，并结合 `onerror` 回调、`AbortController` 超时控制及服务端参数化能力实现多层兜底，既轻量高效又具备强兼容性与实用性，让内容在低带宽下依然快速可感。

在弱网环境下自动切换低质量图片，核心不是“监听网络类型”，而是利用 Network Information API 获取当前连接的粗略带宽与节流状态，并结合图片加载逻辑做降级处理。它不能精确测速，但能提供足够可靠的启发式依据（比如 effectiveType === 'slow-2g' 时主动加载 WebP+压缩版或缩略图）。

1. 检查并监听网络状态变化

Network API 通过 navigator.connection 暴露接口，支持读取和监听变化。注意：需 HTTPS 环境，且部分浏览器（如 Safari）暂不支持 effectiveType 或事件监听。

• 先判断 API 是否可用：if ('connection' in navigator && navigator.connection.effectiveType)
• 读取当前状态：navigator.connection.effectiveType（值为 'slow-2g'、'2g'、'3g'、'4g'）
• 监听变化：navigator.connection.addEventListener('change', handleNetworkChange)

2. 设计图片降级策略

不要等图片加载失败才切换，而是在请求发出前就决策。建议按 effectiveType 分级控制：

• slow-2g / 2g：加载 320px 宽、WebP 格式、质量 40 的缩略图，禁用懒加载
• 3g：加载 750px 宽、WebP、质量 60 的中等图
• 4g / unknown：加载原图或高清图（如 1200px + AVIF）

可将原始 改为用 JS 动态设置 src 或 srcset，避免 HTML 中预加载高质资源。

3. 结合图片加载结果做兜底

Network API 是启发式判断，实际链路可能更差（如高丢包）。因此需叠加加载失败回调：

• 给 绑定 onerror，触发后尝试加载更低清版本（如加 ?q=30 参数）
• 设置超时：用 AbortController 控制图片 fetch 请求，3s 未响应则切降级地址
• 避免无限重试：记录单张图最多降级 2 次，之后显示占位符

4. 实际代码片段示例

以下为轻量整合逻辑（无框架依赖）：

function getLowQualitySrc(src) {
  const url = new URL(src);
  url.searchParams.set('q', '40');
  url.searchParams.set('w', '320');
  url.pathname = url.pathname.replace(/\.(jpg|jpeg|png)/, '.webp');
  return url.toString();
}

function loadResponsiveImage(img, originalSrc) {
  if ('connection' in navigator && navigator.connection.effectiveType) {
    const type = navigator.connection.effectiveType;
    img.src = type === 'slow-2g' || type === '2g'
      ? getLowQualitySrc(originalSrc)
      : type === '3g'
        ? originalSrc.replace('.jpg', '@750w.jpg')
        : originalSrc;
  } else {
    img.src = originalSrc; // 降级为默认
  }
}

// 使用
const img = document.querySelector('[data-lazy]');
loadResponsiveImage(img, img.dataset.original);

Network API 不是万能测速工具，但它提供了轻量、低侵入、符合用户预期的网络感知能力。配合服务端图片参数化（如 Cloudflare Images、Imgix 或自建 proxy），就能在不增加首屏负担的前提下，让弱网用户更快看到内容。

到这里，我们也就讲完了《弱网下自动切换低质量图片的 Network API 实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！