[系统运维] JavaScript 如何实现预加载一张图片

IT数码购物网址头条软件日历阅读图书馆

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

图片批量下载器
↓批量下载图片,美女图库↓

图片自动播放器
↓图片自动播放器↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 系统运维 -> JavaScript 如何实现预加载一张图片 -> 正文阅读

[系统运维]JavaScript 如何实现预加载一张图片

预加载使用情景：

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

核心：监听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

?green.png

系统运维最新文章

配置小型公司网络WLAN基本业务（AC通过三层

如何在交付运维过程中建立风险底线意识，提

快速传输大文件，怎么通过网络传大文件给对

从游戏服务端角度分析移动同步（状态同步）

MySQL使用MyCat实现分库分表

如何用DWDM射频光纤技术实现200公里外的站点

国内顺畅下载k8s.gcr.io的镜像

自动化测试appium

Linux操作系统学习之实用指令（Centos7/8均

上一篇文章下一篇文章查看所有文章

加:2021-09-23 11:50:17 更:2021-09-23 11:51:26

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/15 15:30:07-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码