HTML onload 事件属性

在网页开发中，我们经常会遇到需要在页面加载完成后执行一些操作的情况。这时就可以使用 HTML 的 onload 事件属性来实现。onload 事件属性是在页面加载完成后触发的事件，可以用来执行一些初始化操作、加载外部资源等。

基本语法

onload 事件属性可以直接在 HTML 元素中使用，语法如下：

<body onload="myFunction()">

上面的代码表示在 body 元素加载完成后，会调用名为 myFunction 的 JavaScript 函数。

使用场景

onload 事件属性通常用于以下场景：

1. 初始化页面元素
2. 加载外部资源，如图片、样式表、脚本等
3. 执行一些需要在页面加载完成后才能进行的操作

示例代码

初始化页面元素

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Onload Event Example</title>
    <script>
        function initPage() {
            document.getElementById("welcomeMessage").innerHTML = "Hello, World!";
        }
    </script>
</head>
<body onload="initPage()">
    <h1 id="welcomeMessage"></h1>
</body>
</html>

在上面的示例中，页面加载完成后会将 h1 元素的内容设置为 "Hello, World!"。

加载外部资源

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Onload Event Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" onload="console.log('Styles loaded!')">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，当样式表加载完成后会在控制台输出 "Styles loaded!"。

执行其他操作

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Onload Event Example</title>
    <script>
        window.onload = function() {
            alert("Page loaded!");
        };
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，页面加载完成后会弹出一个提示框显示 "Page loaded!"。

总结

通过使用 HTML 的 onload 事件属性，我们可以在页面加载完成后执行一些操作，从而实现更丰富的交互效果和功能。在实际开发中，要根据具体需求合理地运用 onload 事件属性，以提升用户体验和页面性能。