本文介绍一种无需服务端参与、纯前端实现的“懒加载式模拟图像 URL”方案，通过分段注入 Data URL 的方式，让 标签在初始时保持空白，并在指定延迟后逐步渲染图像，精准复现真实图片加载行为。
本文介绍一种无需服务端参与、纯前端实现的“懒加载式模拟图像 url”方案，通过分段注入 data url 的方式，让 `` 标签在初始时保持空白，并在指定延迟后逐步渲染图像，精准复现真实图片加载行为。
在前端性能调试或 UI 动效验证（如骨架屏、加载占位符、懒加载逻辑）中，常需模拟图像从“未加载”到“完全显示”的完整生命周期。但直接使用 canvas.toDataURL() 生成的 Data URL 会立即触发浏览器解码与渲染，无法体现真实网络加载的延迟感；而 URL.createObjectURL() 也不适用于 Canvas 内容（它仅支持 Blob/File，且一旦绑定即被浏览器预加载）。
✅ 正确解法是：不依赖 URL 对象，而是利用 Data URL 的字符串特性，分阶段赋值给 。浏览器会将每次 src 更新视为一次新资源请求——当传入不完整的 Base64 数据时（如截断的 Data URL），解析失败，图像保持空白；当最终传入完整 URL 时，才真正触发解码与渲染。
以下为可直接运行的完整示例：
<title>Lazy Mock Image Loader</title>
@@##@@
<script>
// 1. 创建模拟图像（Canvas）
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4a90e2'; // 蓝色背景
ctx.fillRect(0, 0, 300, 200);
ctx.fillStyle = 'white';
ctx.font = '24px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('LOADING...', 150, 110);
// 2. 生成完整 Data URL
const fullDataURL = canvas.toDataURL('image/png');
// 3. 分段注入函数：模拟渐进式加载
function slowlyLoadImage(imgElement, step = 1, intervalMs = 600) {
let progress = 4; // 初始分段数（越大越慢）
const timer = setInterval(() => {
// 截取前 N 分之一的 Data URL（强制解析失败）
const partialLength = Math.floor(fullDataURL.length / progress);
imgElement.src = fullDataURL.slice(0, partialLength);
progress -= step;
if (progress <= 0) {
// 最终赋值完整 URL，触发真实加载
imgElement.src = fullDataURL;
clearInterval(timer);
}
}, intervalMs);
}
// 4. 启动模拟（页面加载后执行）
window.addEventListener('load', () => {
const img = document.getElementById('mock-img');
slowlyLoadImage(img, 1, 700); // 每 700ms 推进一次，共约 3 步
});
</script>
⚠️ 关键注意事项：
- 不要使用 URL.createObjectURL(new Blob([...]))：Canvas 无法直接转为 Blob 并延迟加载；即使成功创建，浏览器仍可能预加载该 Blob URL。
-
Data URL 必须完整才能渲染：截断后的 Data URL 因 Base64 不合法，浏览器拒绝解码，
保持 naturalWidth/naturalHeight = 0，且 onload 不触发——这恰好符合“未加载”状态。
-
兼容性无忧：所有现代浏览器均支持 Data URL 分段赋值，且该方法不依赖任何第三方库，完美适配 React/Vue 等框架中的受控
组件（只需获取 DOM 元素引用即可）。
- 可扩展性强：可通过调整 intervalMs 和 step 控制加载节奏，甚至结合 requestAnimationFrame 实现更平滑的视觉过渡。
此方案本质是“欺骗浏览器的资源加载机制”，以极简代码达成高保真模拟效果，是前端性能测试与体验优化中值得收藏的实用技巧。
