javascript - image.src 到大图像在加载时卡住

Question

我一直在阅读图像已经异步加载，或者使用 onload (这不能解决问题)。加载大图像时，特别是从 canvas.toDataURL() 加载图像时，整个页面会在加载图像时卡住。

我正在做的具体工作是在隐藏的 Canvas 中预渲染程序生成的 map (用于游戏)，然后将该数据加载到图像中以更快地绘制。实际问题是设置 src，即使我只是 img.src=img.src 再次调用加载也会发生这种情况。

有没有什么办法可以让大型图像随着时间的推移而不是一次全部加载并导致这种巨大的中断？

Answer 1

这个问题已有 6 年历史，但我偶然发现了它，其他人也可能会遇到。我猜测您首先通过分配 img.src="image.png" 加载图像，然后在其 onload 中进行处理，然后替换图像数据通过 img.src = canvas.toDataURL() 使用处理后的数据，然后再次触发 onload 并继续进行无休止的递归。