本文介绍一种纯前端方案，利用分段写入 data URL 的技巧，使 标签初始不渲染图像，并通过定时器逐步“注入”数据，从而模拟真实网络延迟下的懒加载行为，适用于 UI 加载态测试与性能调试。
本文介绍一种纯前端方案，利用分段写入 data url 的技巧，使 `` 标签初始不渲染图像，并通过定时器逐步“注入”数据，从而模拟真实网络延迟下的懒加载行为，适用于 ui 加载态测试与性能调试。
在前端开发与 UI 测试中，常需模拟图像的真实加载流程（如懒加载、骨架屏过渡、加载失败回退等），但直接使用 canvas.toDataURL() 或 URL.createObjectURL() 生成的 URL 会立即触发浏览器解码与渲染，无法体现“请求发起 → 数据接收 → 渲染完成”的时序特征。
关键在于：不能让浏览器一次性获得完整有效的 data URL。因为只要 img.src 被赋值为一个语法正确、可解析的 data URL（如 data:image/png;base64,...），浏览器就会立刻开始解码并尝试渲染——这与真实 HTTP 图片加载的行为本质不同。
✅ 正确思路是：先赋予一个无效/不完整 URL，再通过定时器逐步补全，直至变为合法 data URL。浏览器仅在 src 变为完整有效值的那一刻才真正开始加载与渲染。
以下是一个稳定可靠的实现方案：
function createMockImageURL(width = 300, height = 200) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 绘制示意内容（可替换为任意图形或文字）
ctx.fillStyle = '#4a90e2';
ctx.fillRect(0, 0, width, height * 0.6);
ctx.fillStyle = '#f5a623';
ctx.fillRect(0, height * 0.6, width, height * 0.4);
return canvas.toDataURL('image/png'); // 返回完整 data URL 字符串
}
// 分段注入 src，模拟渐进式加载
function slowlyLoadImage(img, dataURL, segments = 5, intervalMs = 600) {
let step = 1;
const totalLength = dataURL.length;
const timer = setInterval(() => {
if (step <= segments) {
// 每次只写入前 N 分之一（避免过早形成合法 data URL）
const partialLength = Math.floor((step / segments) * totalLength);
img.src = dataURL.substring(0, partialLength);
step++;
} else {
// 最终写入完整 URL，触发真实加载与渲染
img.src = dataURL;
clearInterval(timer);
}
}, intervalMs);
}
// 使用示例（假设页面中已存在 <img id="mock-img" alt="如何在浏览器中创建延迟加载的模拟图像 URL 以真实复现图片加载过程" >）
document.addEventListener('DOMContentLoaded', () => {
const img = document.getElementById('mock-img');
const fullDataURL = createMockImageURL(400, 250);
// 初始状态：不设置 src，或设为空字符串/占位符，确保无渲染
img.src = '';
// 延迟 300ms 后开始模拟加载（可调整以匹配目标场景）
setTimeout(() => {
slowlyLoadImage(img, fullDataURL, 6, 500);
}, 300);
});⚠️ 重要注意事项：
-
不可用
URL.createObjectURL()替代：该 API 创建的是内存引用，一旦调用即完成资源注册，赋值给img.src后会立即加载，无法中断或延迟； -
toDataURL()是唯一可控入口：它返回字符串，允许我们手动截断、拼接，实现“伪流式注入”； -
分段逻辑需避开 data URL 头部：
data:image/png;base64,是固定前缀（约 22 字符），若过早截断至此位置，浏览器可能因 base64 编码不完整而报错或静默失败；建议按比例截取，确保最终一步才补全全部字符； -
兼容性良好：该方法基于标准 Canvas 和 DOM API，支持所有现代浏览器，且无需修改第三方组件（如 React 封装的
<image></image>），只需控制其src属性即可。
? 进阶提示：若需更精确模拟网络行为（如加载进度、错误、超时），可结合 AbortController + fetch() 构建虚拟服务 Worker，但本方案以轻量、零依赖、高保真视觉效果为核心目标，已在多个 UI 加载态验证场景中稳定使用。
