Response.blob() 实现图片音频异步加载方法

本文深入讲解了如何利用 `Response.blob()` 高效实现图片与音频的异步加载——通过 `fetch` 获取响应后调用 `.blob()` 得到原生二进制 Blob 对象，再借助 `URL.createObjectURL()` 生成轻量、浏览器原生支持的临时 URL 直接赋值给 `` 或 `

通过 Response.blob() 可以高效加载多媒体文件（如图片、音频），无需转成 base64 或完整字符串，既节省内存又支持流式处理。关键在于用 fetch 获取响应后调用 .blob()，再用 URL.createObjectURL() 创建临时 URL 赋给媒体元素。

获取 Blob 并创建可播放/显示的 URL

Response.blob() 返回一个 Promise，解析为 Blob 对象。Blob 是原始二进制数据的封装，浏览器能直接识别其 MIME 类型（如 image/png、audio/mpeg），适合赋值给 的 src 或 的 src：

• 调用 fetch(url).then(res => res.blob()) 获取 Blob
• 用 URL.createObjectURL(blob) 生成生命周期绑定当前文档的临时 URL
• 将该 URL 赋给 img.src 或 audio.src 即可触发渲染或加载
• 页面卸载前建议调用 URL.revokeObjectURL(url) 释放引用（非强制，但推荐）

处理加载失败与类型校验

并非所有响应都适合转为媒体资源。需检查 response.ok 和 response.headers.get('content-type') 避免误加载非媒体内容：

• 若 response.status 不是 2xx，.blob() 仍会成功返回空或异常 Blob，应先判断 res.ok
• 可检查 res.headers.get('content-type') 是否包含 image/ 或 audio/，过滤掉 HTML、JSON 等不兼容类型
• 将 .blob() 放在 then 链中，并用 catch 捕获网络错误或解析异常

配合 DOM 元素实现按需加载

适用于懒加载图片、预加载音频片段等场景。例如为 添加加载逻辑：

• 监听元素进入视口，触发 fetch(data-src)
• 拿到 Blob 后生成 URL，设为 img.src，同时移除 data-src
• 可添加 loading 状态类，加载完成后再移除，配合 CSS 显示骨架屏或淡入动画
• 对 ，设置 src 后可调用 load() 或直接 play()（注意自动播放策略限制）

注意事项与性能提示

Blob 本身不自动释放内存，createObjectURL 生成的 URL 会保持对 Blob 的引用：

• 避免长期持有大量 object URL，尤其在列表滚动加载多张图时，及时 revokeObjectURL
• Blob 可复用：同一 Blob 可生成多个 URL，也可用于 FileReader 读取内容或上传
• 不建议用 blob.text() 处理图片/音频——会失败或乱码；仅 blob() 适用
• 如需进一步处理（如压缩图片、提取音频元数据），可用 new FileReader().readAsArrayBuffer(blob) 转为 ArrayBuffer

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Response.blob() 实现图片音频异步加载方法》文章吧，也可关注golang学习网公众号了解相关技术文章。