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'; // 替换为你的图片URLimg.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事件来监听异步脚本的加载完成。
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!');});
在这个例子中，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 ( My Component
);}export default MyComponent;
在这个例子中，useEffect钩子会在组件挂载后执行。handleLoad函数会在页面加载完成后被调用。return语句中的函数会在组件卸载时执行，用于移除事件监听器，防止内存泄漏。 空数组 [] 作为 useEffect 的第二个参数，确保 effect 只在组件挂载和卸载时执行一次。
以上就是JavaScript怎样监听页面加载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508143.html
微信扫一扫 
支付宝扫一扫 
