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