问题
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.
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?
回答1:
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.
来源：https://stackoverflow.com/questions/24105931/image-src-to-large-image-freezes-while-loading