本文介绍一种纯前端方案，通过分段注入 data url 实现图像“渐进式加载”效果，无需修改第三方组件（如 react 图片组件），即可精准模拟真实网络延迟下的图片加载行为。
本文介绍一种纯前端方案，通过分段注入 data url 实现图像“渐进式加载”效果，无需修改第三方组件（如 react 图片组件），即可精准模拟真实网络延迟下的图片加载行为。
在前端性能调试、懒加载逻辑验证或 UI 动效预演中，我们常需在不依赖真实网络请求的前提下，复现图像从空白到完全显示的加载过程。但直接使用 canvas.toDataURL() 生成的完整 Data URL 赋值给 后，浏览器会立即解码并渲染——这与真实场景中“URL 已设置、资源尚未加载”的状态不符。
关键在于：必须让 元素初始时持有“无效”或“不完整”的 URL，使其处于 pending 状态；再通过 JS 主动补全 URL，触发浏览器启动加载流程。 URL.createObjectURL() 并不适用此场景（它绑定 Blob 后立即可读，且无法“分段激活”），而 toDataURL() 的字符串特性恰好支持“渐进拼接”。
以下为推荐实现方案（已验证兼容 Chrome/Firefox/Edge）：
@@##@@
function createProgressiveMockImage(delayMs = 800) {
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
// 绘制示例内容（可替换为任意图形/文本）
ctx.fillStyle = '#4a90e2';
ctx.fillRect(40, 30, 120, 140);
ctx.fillStyle = '#e74c3c';
ctx.fillRect(180, 30, 80, 140);
ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = 'white';
ctx.fillText('MOCK', 100, 110);
const dataUrl = canvas.toDataURL('image/png');
const img = document.getElementById('mock-img');
// 初始设为空字符串，确保 img 处于未加载状态（src="" 是合法且无加载行为的）
img.src = '';
// 分段注入：从极短的前缀开始（如 "da"），逐步扩展至完整 Data URL
let step = 1;
const totalSteps = 8;
const interval = setInterval(() => {
const partial = dataUrl.slice(0, Math.floor(dataUrl.length * (step / totalSteps)));
img.src = partial;
if (step >= totalSteps) {
clearInterval(interval);
// 最终赋值完整 URL，触发真实加载与渲染
img.src = dataUrl;
}
step++;
}, delayMs / totalSteps);
}
// 调用示例：3 秒内完成渐进加载
createProgressiveMockImage(3000);
✅ 核心原理说明：
- 浏览器对
的解析是实时的。当 src 为非法/不完整 Data URL（如 "data:," 或 "data:image/png;base64,i"）时，会静默忽略，不发起解码；
- 随着字符串逐渐补全，仍处于非法状态，直至达到完整 Base64 结构后，浏览器才真正开始解码并渲染；
- 此过程完全由 JS 控制节奏，完美模拟了网络延迟、分块传输等真实加载特征。
⚠️ 注意事项：
- 不要使用 img.src = 'about:blank' 或 null 初始化——部分浏览器会触发 load 事件或产生错误日志；
- slice(0, N) 必须保证截断点不在 Base64 字符中间（本方案因按比例截取且 Base64 长度足够，实际不会破坏结构）；
- 若需更高精度控制（如模拟 HTTP 状态码、加载失败），建议改用 fetch() + createObjectURL(new Blob([arrayBuffer])) 组合，并配合 AbortController 模拟中断，但复杂度显著上升；
- 该方法适用于调试和演示，不可用于生产环境的图片加载逻辑（Data URL 体积大、无缓存、CPU 解码开销高）。
通过此方案，你可在不侵入第三方 React 组件（如 react-lazy-load-image-component）的前提下，精准验证懒加载占位、加载骨架屏、错误回退等交互逻辑——一切尽在浏览器内存中可控发生。
