image.src到大图像在加载时冻结 [英] image.src to large image freezes while loading

问题描述

我一直在阅读图像已经异步加载，或者使用 onload (无法解决问题).加载大图像时，尤其是从 canvas.toDataURL()加载大图像时，整个页面会在加载图像时冻结.

I keep reading that images are already loaded asynchronously, or to use onload (which doesn't solve the problem). When loading a large image, specifically from canvas.toDataURL(), the whole page freezes while the image is being loaded.

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

What I'm doing specifically is prerendering a procedurally generated map (for a game) in a hidden canvas, then loading that data into an image to draw faster. The actual problem is setting the src, which happens even if I just img.src=img.src to invoke loading again.

有没有办法使大图像随时间推移而不是一次全部加载并造成巨大破坏?

Is there any way at all to make large images load over time instead of all at once and causing this huge disruption?

推荐答案

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

This question is 6 years old but I stumbled across it and others may as well. I am guessing that you first load the image by assigning img.src="image.png", then in its onload you are doing the processing and then replacing the image's data with the processed data by going img.src = canvas.toDataURL(), which then fires the onload again and goes on in an endless recursion.

这篇关于image.src到大图像在加载时冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！