图像-替代加载图像？

Question

I don't know how it's called so google isn't giving me good answers.

How do create a replacement image for an image that is yet to be loaded?

Like when the image size is big, I'd like to replace it with something like "Loading. Please wait" or something while the image is still being loaded and will be displayed once it has completed loading?

Answer 1

There is a canonical way to do this:

• Have one single static image of the "loading, please wait" type. As it is static, it will be loaded from cache
• Load the image you really want to display into an identical image node on a hidden div
• When the image has loaded ( <img onload="..." ...> ) replace the DOM node of the placeholder image with the preloaded node.