如何处理 JavaScript onload 事件

摘要：在本教程中，您将学习如何在 JavaScript 中处理文档、图像和脚本元素上触发的 load 事件。

窗口的 load 事件

对于 window 对象，load 事件在整个网页（HTML）完全加载后触发，包括所有资源，如 JavaScript 文件、CSS 文件和图像。

要处理 load 事件，您使用 addEventListener() 方法注册事件侦听器

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});Code language: JavaScript (javascript)

或者，您可以使用 window 对象的 onload 属性

window.onload = (event) => {
    console.log('The page has fully loaded');
};Code language: JavaScript (javascript)

如果您维护一个遗留系统，您可能会发现 load 事件处理程序在 HTML 文档的 body 元素中注册，如下所示

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>Code language: HTML, XML (xml)

最好尽可能使用 addEventListener() 方法来分配 onload 事件处理程序。

图像的 load 事件

load 事件也会在图像上触发。要处理图像上的 load 事件，您使用图像元素的 addEventListener() 方法。

以下示例使用 load 事件处理程序来确定 DOM 树中存在的图像是否已完全加载

<!DOCTYPE html>
<html>
<head>
    <title>Image load Event Demo</title>
</head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    </script>
</body>
</html>
Code language: HTML, XML (xml)

您可以使用 <img> 元素的 onload 属性直接分配 onload 事件处理程序，如下所示

<img id="logo" 
     src="logo.png" 
     onload="console.log('Logo loaded!')">
Code language: HTML, XML (xml)

如果您动态地创建图像元素，则可以在设置 src 属性之前分配 onload 事件处理程序，如下所示

window.addEventListener('load' () => {
    let logo = document.createElement('img');
    // assign and onload event handler
    logo.addEventListener('load', (event) => {
        console.log('The logo has been loaded');
    });
    // add logo to the document
    document.body.appendChild(logo);
    logo.src = 'logo.png';
});
Code language: JavaScript (javascript)

工作原理

首先，在文档完全加载后，通过将代码放置在窗口的 load 事件的事件处理程序中来创建图像元素。
其次，将 onload 事件处理程序分配给图像。
第三，将图像添加到文档中。
最后，将图像 URL 分配给 src 属性。一设置 src 属性，图像就会下载到元素中。

脚本的 load 事件

<script> 元素也支持 load 事件，与标准方式略有不同。脚本的 load 事件允许您检查 JavaScript 文件是否已完全加载。

与图像不同，Web 浏览器仅在分配了 src 属性并将 <script> 元素添加到文档中后才开始下载 JavaScript 文件。

以下代码在页面完全加载后加载 app.js 文件。它分配了一个 onload 事件处理程序来检查 app.js 是否已完全加载。

window.addEventListener('load', checkJSLoaded)

function checkJSLoaded() {
    // create the script element
    let script = document.createElement('script');
    
    // assign an onload event handler
    script.addEventListener('load', (event) => {
        console.log('app.js file has been loaded');
    });

    // load the script file
    script.src = 'app.js';
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

摘要

load 事件在文档完全加载后发生，包括依赖资源，如 JavaScript 文件、CSS 文件和图像。
<img> 和 <script> 元素也支持 load 事件。
使用 addEventListener() 方法注册 onload 事件处理程序。

本教程对您有帮助吗？