JavaScript监听页面加载的3种方法详解

从现在开始，努力学习吧！本文《JavaScript监听页面加载的常用方法有以下几种，适用于不同的场景：1. 使用 window.onload这是最传统的方式，当整个页面（包括图片、脚本等）加载完成后触发。window.onload = function() { console.log("页面加载完成"); };✅ 优点：简单直接 ❌ 缺点：如果页面中有大量资源（如图片），可能会延迟执行2. 使用 DOMContentLoaded 事件这个事件在 HTML 文档完全加载和解析完成后触发，不需要等待图片、样式表等外部资源加载。document.addEventListener("DOMContentLoaded", function() { console.log("DOM 加载完成"); });✅ 优点：更快触发，适合初始化操作 ❌ 缺点：不等待图片等资源加载3. 使用 performance.timing 获取更详细的加载时间如果你需要精确统计页面加载时间，可以使用浏览器的性能 API。window.addEventListener("load", function() { const timing = performance.timing; const loadTime = timing.loadEventEnd - timing.navigationStart; console.log("页面加载耗时: " + loadTime + "ms"); });✅ 优点：可获取详细加载时间信息 ❌ 缺点：较复杂，不适合简单的监听需求》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

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文档被完全加载和解析后触发，后者则在所有资源（如图片、样式表）都加载完毕后触发。选择哪个事件取决于你的具体需求。

监听页面加载：

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

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

   document.addEventListener('DOMContentLoaded', function() {
       // DOM准备就绪，可以安全地操作DOM元素
       console.log('DOM is ready!');
   });

   这个事件的优点是无需等待图片、样式等外部资源加载，因此执行速度非常快。缺点是，如果你的代码依赖于某些外部资源，可能需要在DOMContentLoaded事件处理函数中做额外的判断。

   

2. load事件： window.onload事件会在整个页面及其所有依赖资源（如图片、样式表）都加载完毕后触发。

   window.addEventListener('load', function() {
       // 页面及其所有资源加载完毕
       console.log('Page is fully loaded!');
   });

   load事件的优点是可以确保所有资源都加载完毕，缺点是等待时间较长，可能会影响用户体验。

3. 使用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!');
           }
       });
   }

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

4. 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 只在组件挂载和卸载时执行一次。

以上就是《JavaScript监听页面加载的3种方法详解》的详细内容，更多关于JavaScript,性能API,DOMContentLoaded,监听页面加载,load事件的资料请关注golang学习网公众号！