如何用 Network API 在弱网环境下自动切换低质量图片-js教程-PHP中文网

弱网环境下应利用network information api获取effectivetype进行图片降级，而非仅监听网络类型；按slow-2g/2g、3g、4g分级加载缩略图/webp/原图，并结合onerror与超时兜底。

如何用 network api 在弱网环境下自动切换低质量图片

在弱网环境下自动切换低质量图片，核心不是“监听网络类型”，而是利用 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）

可将原始 <img src="original.jpg"> 改为用 JS 动态设置 src 或 srcset，避免 HTML 中预加载高质资源。

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

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

给 <img> 绑定 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），就能在不增加首屏负担的前提下，让弱网用户更快看到内容。