JavaScript onload事件详解|极客笔记

JavaScript onload事件详解

在网页开发中，经常会遇到需要在页面加载完成后执行一些操作的情况。为了实现这一目的，JavaScript提供了一个onload事件。

什么是onload事件？

onload事件是在页面或某个元素加载完成后触发的事件。它可以用来执行一些初始化操作、加载资源或处理用户交互等。

如何使用onload事件？

在页面加载完成后执行操作

可以在页面的<body>标签上使用onload事件，在页面加载完成后执行某些操作，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>onload事件示例</title>
</head>
<body onload="init()">
    <h1>Hello, onload事件!</h1>

    <script>
        function init() {
            console.log('页面加载完成！');
        }
    </script>
</body>
</html>

在上面的示例中，页面加载完成后会在控制台输出页面加载完成！。

在图片加载完成后执行操作

除了在页面加载完成后触发onload事件，还可以在图片加载完成后触发onload事件。例如：

<!DOCTYPE html>
<html>
<head>
    <title>图片加载完成后触发onload事件示例</title>
</head>
<body>
    <img src="https://example.com/image.jpg" onload="imageLoaded()">

    <script>
        function imageLoaded() {
            console.log('图片加载完成！');
        }
    </script>
</body>
</html>

在上面的示例中，当图片加载完成后会在控制台输出图片加载完成！。