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

最新推荐文章于 2024-08-27 22:36:25 发布

Buildy_j

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量338

点赞数

分类专栏： #JS面试题面试题文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_39280289/article/details/120425354

版权

面试题同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

#JS面试题

20 篇文章 0 订阅

订阅专栏

预加载使用情景：

当网络状态不好时，目标图片加载缓慢，此时需要一张体积小的图片充当占位符，一是告诉用户知道这个地方有个图片这一信息，二是页面更美观一些不至于留一块大白。

核心：监听DOM的load事件（在DOM对象已加载时，发生此事件）。

<body>
    <img src="./red.png" />
    <script>
        const oImg = document.querySelector('img');
        oImg.onload = function () {
            this.src = './green.png';
            this.onload = false;//防止重复调用
        }
    </script>
</body>

可以看到页面从红色一下子闪到绿色，是因为本地加载速度快。

red.png