源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML DOM onload

2026/01/01
11
0

学习目标

  • 理解 onload 事件的触发时机及其在网页生命周期中的作用

  • 掌握在 <body>、<img>、<script> 等元素上使用 onload 的方法

  • 能够利用 onload 实现页面初始化、资源加载检测和动态功能启动

  • 了解其支持的 HTML 元素范围及现代替代方案（如 window.addEventListener('load')）

什么是 onload 事件

onload 是一个加载完成事件，当指定的 HTML 元素或整个页面完全加载完毕时触发。

它确保：所有 HTML 内容、CSS 样式、JavaScript 脚本、图片、iframe 等资源都已加载完成。

触发时机

元素

触发条件

<body> / window

整个页面（包括所有依赖资源）加载完成

<img>

图片文件下载并渲染完成

<script>

外部脚本文件加载并执行完毕

<iframe>

内嵌框架页面完全加载

<link>（用于样式表）

CSS 文件加载完成（部分浏览器支持）

注意：onload 不会在仅 HTML 结构解析完成时触发（那是 DOMContentLoaded 的职责）。

支持的 HTML 元素

onload 可用于以下元素：

  • <body>（最常用）

  • <frame>（已废弃）

  • <frameset>（已废弃）

  • <iframe>

  • <img>

  • <input type="image">

  • <link>（主要用于 <link rel="stylesheet">）

  • <script>

  • <style>（较少见）

虽然语法上可写在这些标签上，但实际开发中主要用在 <body> 和 <img>。

语法与绑定方式

1. 内联方式

<body onload="initPage()">
<img src="photo.jpg" onload="onImageLoad()">

2. 属性赋值

window.onload = function() {
    initPage();
};

// 或针对图片
document.getElementById("myImg").onload = function() {
    console.log("图片加载完成");
};

3. addEventListener

window.addEventListener("load", initPage);

推荐：对于全局页面加载，优先使用 window.addEventListener("load", ...)，避免覆盖已有 onload。

实战示例

页面加载完成后弹出提示

body 中使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onload 页面加载示例</title>
    <script>
        function onPageLoad() {
            alert("页面已完全加载！");
            // 可在此初始化轮播图、地图、数据请求等
        }
    </script>
    <style>
        body { text-align: center; padding: 40px; }
        h1 { color: green; }
    </style>
</head>
<body onload="onPageLoad()">
    <h1>编程学习网</h1>
    <h2>onload 事件演示</h2>
    <p>等待页面所有资源加载完成后，将弹出提示。</p>
</body>
</html>

应用场景：初始化第三方插件（如地图、图表）、启动动画、发送页面访问统计。

监听图片加载状态

img 中使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片 onload 示例</title>
</head>
<body style="text-align: center;">
    <h2>加载网站 Logo</h2>
    <img 
        id="logo" 
        src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
        onload="onImageLoaded()" 
        onerror="onImageError()"
        width="500" 
        height="132"
        style="border: 2px dashed #ccc;"
    >
    <p id="status">正在加载图片...</p>

    <script>
        function onImageLoaded() {
            document.getElementById("status").textContent = "图片加载成功！";
            document.getElementById("status").style.color = "green";
        }

        function onImageError() {
            document.getElementById("status").textContent = "图片加载失败！";
            document.getElementById("status").style.color = "red";
        }
    </script>
</body>
</html>

进阶技巧：结合 onload 和 onerror 可实现图片懒加载、占位符替换、失败重试等逻辑。

应用场景

场景

说明

页面初始化

启动轮播图、初始化地图 API

资源加载监控

检测关键图片 / 脚本是否加载成功

性能分析

记录页面完整加载时间（performance.now()）

动态内容注入

在所有资源就绪后插入广告或推荐内容

兼容性处理

根据浏览器能力动态加载 polyfill 脚本

onload vs DOMContentLoaded

事件

触发时机

适用场景

window.onload

所有资源（HTML、CSS、JS、图片、iframe）加载完成

需要确保图片 / 外部资源就绪的操作

DOMContentLoaded

仅 HTML 文档解析完成（不等图片 /CSS/JS）

尽早操作 DOM，提升响应速度

// 更快的 DOM 操作
document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM 已就绪，但图片可能未加载");
});

// 完整资源就绪
window.addEventListener("load", () => {
    console.log("所有资源（包括图片）已加载完成");
});

最佳实践：

  • 操作 DOM → 用 DOMContentLoaded

  • 操作图片尺寸 / 布局 → 用 load

重点总结

  • onload 表示资源完全加载完成，是页面生命周期的关键节点

  • 常用于 <body>（页面级）和 <img>（资源级）

  • 与 DOMContentLoaded 互补：前者等所有资源，后者只等 HTML

  • 支持内联、属性赋值、addEventListener 三种绑定方式

  • 可结合 onerror 实现健壮的资源加载处理逻辑

思考题

  1. 如果页面包含 10 张大图，使用 window.onload 初始化轮播图会导致什么用户体验问题？如何优化？

  2. 能否在 <div> 元素上使用 onload？为什么？如果想监听某个区域内容加载完成，应如何实现？

  3. 如何利用 onload 实现“页面加载进度条”？请描述基本思路（提示：结合 document.readyState 和 load 事件）。