JavaScript怎样监听页面加载？-js教程-PHP中文网

JavaScript怎样监听页面加载？

星降

发布： 2025-07-01 19:00:03

原创

927人浏览过

domcontentloaded事件在dom解析完成后触发，适合操作dom；load事件在所有资源加载后触发，适合依赖外部资源的操作。监听页面加载的方法有：1.domcontentloaded事件，用于快速响应dom就绪状态；2.load事件，确保所有资源加载完成；3.使用readystate属性，较少使用；4.jquery的$(document).ready()方法，基于domcontentloaded实现。若需处理图片加载失败，可使用onerror事件；异步加载脚本可通过script标签的onload事件监听；在react中，可用useeffect钩子监听load事件并进行清理操作。选择事件应根据是否依赖外部资源决定。

JavaScript怎样监听页面加载？

JavaScript监听页面加载，核心在于理解和利用DOMContentLoaded和load这两个事件。前者在HTML文档被完全加载和解析后触发，后者则在所有资源（如图片、样式表）都加载完毕后触发。选择哪个事件取决于你的具体需求。

监听页面加载：

监听页面加载完成的几种方法

DOMContentLoaded事件： 这是最常用的方法，它在DOM树构建完成后立即触发，速度快，用户体验好。

立即学习“Java免费学习笔记（深入）”；
```
document.addEventListener('DOMContentLoaded', function() {
    // DOM准备就绪，可以安全地操作DOM元素
    console.log('DOM is ready!');
});
```
登录后复制
这个事件的优点是无需等待图片、样式等外部资源加载，因此执行速度非常快。缺点是，如果你的代码依赖于某些外部资源，可能需要在DOMContentLoaded事件处理函数中做额外的判断。
load事件： window.onload事件会在整个页面及其所有依赖资源（如图片、样式表）都加载完毕后触发。
```
window.addEventListener('load', function() {
    // 页面及其所有资源加载完毕
    console.log('Page is fully loaded!');
});
```
登录后复制
load事件的优点是可以确保所有资源都加载完毕，缺点是等待时间较长，可能会影响用户体验。

使用readyState属性： 早期浏览器中使用document.readyState属性来判断文档加载状态。虽然现在不常用，但了解一下也无妨。

if (document.readyState === 'complete') {
    // 文档已加载完毕
    console.log('Document is complete!');
} else {
    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            // 文档已加载完毕
            console.log('Document is complete!');
        }
    });
}

登录后复制

这种方法比较繁琐，不推荐使用。

jQuery的$(document).ready()： 如果你使用了jQuery，可以使用$(document).ready()方法来监听DOM加载完成。

壁纸样机神器
免费壁纸样机生成

0

查看详情
```
$(document).ready(function() {
    // DOM准备就绪
    console.log('DOM is ready (jQuery)!');
});
```
登录后复制
实际上，$(document).ready()方法底层也是基于DOMContentLoaded事件实现的。

`DOMContentLoaded`和`load`事件有什么区别，应该选择哪个？

DOMContentLoaded事件在HTML文档被完全加载和解析后触发，而load事件在所有资源（包括图片、样式表等）都加载完毕后触发。

选择哪个事件取决于你的需求。如果你的代码只需要操作DOM元素，不需要等待外部资源加载，那么应该选择DOMContentLoaded事件，因为它速度更快，用户体验更好。如果你的代码依赖于外部资源，那么应该选择load事件。

例如，如果你需要在页面加载完成后初始化一个图片轮播组件，那么应该选择load事件。如果你需要在页面加载完成后修改DOM元素的样式，那么应该选择DOMContentLoaded事件。

如何处理图片加载失败的情况？

图片加载失败会导致load事件无法触发，影响用户体验。为了解决这个问题，可以使用onerror事件来监听图片加载失败的情况。

const img = new Image();
img.src = 'image.jpg'; // 替换为你的图片URL

img.onload = function() {
    console.log('Image loaded successfully!');
};

img.onerror = function() {
    console.error('Image failed to load!');
    // 处理图片加载失败的情况，例如显示默认图片
    img.src = 'default.jpg';
};

document.body.appendChild(img);

登录后复制

在这个例子中，如果image.jpg加载失败，onerror事件处理函数会被调用，你可以显示一张默认图片或者采取其他措施。

异步加载的JavaScript脚本如何监听加载完成？

异步加载的JavaScript脚本不会阻塞页面的解析和渲染，但有时我们需要知道脚本何时加载完成。可以使用script标签的onload事件来监听异步脚本的加载完成。

<script>
function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = function() {
        callback();
    };
    document.head.appendChild(script);
}

loadScript('my-script.js', function() {
    console.log('my-script.js loaded successfully!');
});
</script>

登录后复制

在这个例子中，loadScript函数会动态创建一个script标签，并将其添加到head标签中。当脚本加载完成后，onload事件处理函数会被调用。

如何在React组件中监听页面加载？

在React组件中，可以使用useEffect钩子来监听页面加载。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    function handleLoad() {
      console.log('Page is fully loaded (React)!');
    }

    window.addEventListener('load', handleLoad);

    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, []);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}

export default MyComponent;

登录后复制

在这个例子中，useEffect钩子会在组件挂载后执行。handleLoad函数会在页面加载完成后被调用。return语句中的函数会在组件卸载时执行，用于移除事件监听器，防止内存泄漏。空数组 [] 作为 useEffect 的第二个参数，确保 effect 只在组件挂载和卸载时执行一次。

以上就是JavaScript怎样监听页面加载？的详细内容，更多请关注php中文网其它相关文章！