Javascript：如何在浏览器请求懒加载图片前触发事件获取限时token

原生 loading="lazy" 没有提供图片请求发起前的公开回调事件，浏览器内部触发资源请求的逻辑无法直接插入自定义获取token的流程，以下是2种可落地的实现方案：

方案1：自行基于 Intersection Observer 实现懒加载（最推荐） #

完全自主控制懒加载的触发时机，逻辑透明可控，兼容性覆盖95%以上的全球用户，是生产环境最常用的懒加载实现方式。

实现思路 #

• 初始渲染时图片不设置src属性，将真实图片地址存在自定义属性data-src中
• 利用Intersection Observer监听图片元素的可见性，可通过rootMargin配置提前触发逻辑，避免用户看到加载空白
• 触发可见回调后，先请求有效token，再拼接token生成合法的图片地址赋值给src触发加载

代码示例 #

<!-- 页面内图片结构 -->
<img class="lazy-image" data-src="/resource/your-image-id" alt="图片描述">

const imageObserver = new IntersectionObserver(async (entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue
    const img = entry.target
    // 避免重复加载
    if (img.src) return

    try {
      // 获取时效token
      const tokenResp = await fetch('/api/get-image-access-token')
      const { token } = await tokenResp.json()
      // 拼接token生成可访问的图片地址，也可通过fetch带Authorization头获取blob转objectURL实现
      img.src = `${img.dataset.src}?access_token=${token}`
    } catch (e) {
      // 错误兜底：加载失败展示默认图
      img.src = '/default/failure-image.png'
    } finally {
      // 加载完成后取消观察
      imageObserver.unobserve(img)
    }
  }
}, {
  rootMargin: '200px 0', // 图片距离视口还有200px时提前触发加载
  threshold: 0.01
})

// 注册所有需要懒加载的图片
document.querySelectorAll('.lazy-image').forEach(img => {
  imageObserver.observe(img)
})

方案2：Service Worker 拦截请求（无侵入改造） #

如果不想改动现有业务的图片标签结构，可以通过Service Worker拦截全局的图片资源请求，在拦截逻辑中统一处理token的校验、更新，无需修改上层懒加载逻辑，原生loading="lazy"可正常使用。

实现思路 #

• 注册Service Worker，匹配目标图片域名的资源请求
• 拦截请求后检查本地存储的token是否在有效期内，过期则先请求新token
• 将有效token添加到请求参数或请求头中，再转发请求到服务器

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