js中onload的用法

原创

ithorizon 1个月前 (10-03) 阅读数 84 #Javascript

JS中onload事件的用法

引言

在Web开发中，我们频繁需要在页面加载完成后执行一些JavaScript代码。这时，onload事件就派上用场了。本文将详细介绍怎样在JavaScript中使用onload事件。

一、onload事件的定义

onload事件在页面或图片加载完成后触发。它可以应用于不同的元素，如<body>、<frame>、<iframe>和<img>等。

二、onload事件的用法

下面我们将通过几个示例来了解onload事件的用法。

示例1：在`<body>`标签中使用onload

在以下示例中，当页面加载完成后，将执行一段JavaScript代码：


<body onload="myFunction()">
  <script>
    function myFunction() {
      alert('页面加载完成！');
    }
  </script>
</body>

示例2：在`<img>`标签中使用onload

在以下示例中，当图片加载完成后，将执行一段JavaScript代码：


<img src="example.jpg" onload="imageLoad()">
<script>
  function imageLoad() {
    alert('图片加载完成！');
  }
</script>

三、使用DOM Level 2事件监听器

除了内联方法（如示例1和示例2所示），我们还可以使用DOM Level 2事件监听器来添加onload事件。以下是示例代码：


<body>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      alert('页面加载完成！');
    });
  </script>
</body>

在这个示例中，我们使用了DOMContentLoaded事件，它与onload事件类似，但它是在DOM结构加载完成后触发，而不需要等待图片等资源加载完成。

四、总结

本文介绍了JavaScript中onload事件的用法。通过在<body>、<img>等标签上使用onload事件，我们可以轻松地在页面或图片加载完成后执行特定的JavaScript代码。同时，我们还了解了怎样使用DOM Level 2事件监听器来实现类似的功能。在实际开发中，我们可以基于需要选择合适的方法来实现onload事件。

文章标签： Javascript