JavaScript 如何实现预加载一张图片

预加载使用情景:
当网络状态不好时,目标图片加载缓慢,此时需要一张体积小的图片充当占位符,一是告诉用户知道这个地方有个图片这一信息,二是页面更美观一些不至于留一块大白 。
核心:监听DOM的load事件(在DOM对象已加载时,发生此事件) 。

JavaScript 如何实现预加载一张图片

文章插图

可以看到页面从红色一下子闪到绿色,是因为本地加载速度快 。
red.png
【JavaScript 如何实现预加载一张图片】
JavaScript 如何实现预加载一张图片

文章插图
green.png