JS页面加载完成判断方法大全

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS判断页面加载完成的几种方法：DOMContentLoaded 事件 该事件在 HTML 文档完全加载和解析完成后触发，不等待图片、样式表等资源加载。document.addEventListener("DOMContentLoaded", function () { console.log("页面DOM加载完成"); });window.onload 事件 该事件在页面所有资源（如图片、样式表、脚本等）加载完成后触发。window.addEventListener("load", function () { console.log("页面所有资源加载完成"); });使用 document.readyState 属性 可以检查文档的加载状态，当其值为 "complete" 时表示页面已加载完毕。if (document.readyState === "complete") { console.log("页面已加载完成"); } else { document.addEventListener("readystatechange", function () { if (document.readyState === "complete") { console.log("页面已加载完成"); } }); }使用 MutationObserver 监听 DOM 变化（适用于动态加载内容的场景） 如果页面内容是通过 JavaScript 动态加载的，可以监听 DOM 变化来判断内容是否加载完成。 const observer = new MutationObserver(function (mutationsList,》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

判断页面加载完成的核心方法有三种：使用DOMContentLoaded事件、load事件和document.readyState属性；2. DOMContentLoaded事件在HTML文档解析完成、DOM树构建完毕时触发，适合需要操作DOM的场景，执行时机早于load事件；3. load事件在页面所有资源（如图片、CSS、脚本等）完全加载后触发，适用于需确保所有资源可用的逻辑；4. document.readyState属性提供加载状态的实时信息，其值为"loading"、"interactive"（对应DOMContentLoaded）和"complete"（对应load事件），可结合事件监听或直接判断使用；5. 一般情况下优先使用DOMContentLoaded以提升响应速度，若需操作图片尺寸或确保样式完全加载则应使用load事件；6. 针对加载超时，可通过setTimeout设置超时机制，在规定时间内未触发load则执行降级处理；7. 对于动态内容加载，应使用Promise链或回调函数在数据渲染完成后执行后续逻辑，而非依赖页面原生加载事件；8. MutationObserver可用于监听特定DOM元素的插入，适用于无法控制加载逻辑但需知道元素何时出现的场景；9. 懒加载使部分资源延迟加载，load事件无法反映所有内容状态，应结合IntersectionObserver监听元素进入视口并监听其load事件来判断加载完成；10. 预加载通过提前加载资源优化性能，但仍受load事件等待，不影响“完全加载”的定义。选择合适的方法需根据具体需求权衡执行时机与资源依赖。

JavaScript判断页面加载完成，核心是利用浏览器提供的几个关键机制：DOMContentLoaded事件、load事件，以及document.readyState属性。它们各自代表了页面生命周期的不同阶段，理解它们能帮助我们精准控制代码执行时机。

解决方案

• DOMContentLoaded事件 当HTML文档被完全加载和解析完成，DOM树构建完毕，但像图片、样式表等外部资源可能还没加载完成时触发。这个事件非常适合需要操作DOM的代码，因为它不会等待所有资源加载，响应更快。

  document.addEventListener('DOMContentLoaded', () => {
      console.log('DOM is ready! (HTML parsed, but resources might still be loading)');
      // 可以在这里操作DOM元素，例如给按钮添加事件监听器
      const myButton = document.getElementById('myBtn');
      if (myButton) {
          myButton.addEventListener('click', () => {
              alert('Button clicked!');
          });
      }
  });

• load事件 当整个页面，包括所有依赖的资源（如图片、CSS、JavaScript文件等）都已加载完成时触发。如果你需要确保所有视觉元素都已呈现，或者脚本依赖于所有外部资源，那么load事件是更稳妥的选择。

  window.addEventListener('load', () => {
      console.log('Page and all resources are fully loaded!');
      // 页面所有内容都已可用，适合执行需要所有资源就绪的逻辑
      // 例如，获取图片实际尺寸，或启动依赖所有CSS的复杂布局
      const img = document.getElementById('myImage');
      if (img) {
          console.log('Image dimensions:', img.naturalWidth, img.naturalHeight);
      }
  });

• document.readyState属性 这个属性提供了文档加载状态的实时信息。它有三个可能的值：

  • loading: 文档仍在加载中。
  • interactive: 文档已经完成解析，但外部资源仍在加载中（类似于DOMContentLoaded触发时）。
  • complete: 文档和所有子资源都已完全加载完成（类似于load事件触发时）。 你可以通过检查这个属性来判断当前状态，或者结合事件监听来处理。

  if (document.readyState === 'complete') {
      console.log('Page already loaded (readyState is complete) when this script ran.');
      // 如果脚本在load事件之后才加载，直接检查这个状态很有用
  } else {
      window.addEventListener('load', () => {
          console.log('Page loaded via load event (readyState was not complete initially).');
      });
  }
  
  // 也可以在不同阶段做判断
  console.log('Current document.readyState:', document.readyState);

  有时候，如果你的脚本是在页面加载后期才动态插入或执行的，直接检查document.readyState === 'complete'就显得很有必要，避免错过load事件。

DOMContentLoaded 和 load 事件，我到底该用哪个？

这确实是个让人纠结的问题，我个人经验是，大部分时候，DOMContentLoaded就足够了。它更快，因为它只关心DOM结构是否准备好，而不用傻傻地等待所有图片、字体甚至广告脚本加载完。你想想，如果一个页面有很多大图或者外部字体文件，load事件可能要等很久，用户体验会受影响。如果你只是想操作页面上的元素，比如给按钮添加点击事件，或者初始化一些UI组件，DOMContentLoaded是首选，因为DOM树已经在那了，你完全可以开始工作。

但也有例外。比如，如果你需要获取图片的实际尺寸（在CSS中设置的尺寸不算，要等图片真正加载进来才有），或者需要确保所有CSS都已应用，避免页面闪烁（FOUC），那load事件就显得更可靠。再比如，一些第三方统计脚本或者广告脚本，它们通常会要求在页面完全加载后才执行，以确保所有数据都能被正确捕获，这时候window.onload就派上用场了。选择哪个，真的取决于你的具体需求和对性能的考量。

面对加载慢或动态内容，如何更健壮地判断页面状态？

嗯，现实往往比理想骨感。页面加载慢，或者内容是动态通过AJAX/Fetch加载进来的，原生的DOMContentLoaded和load事件就显得有点力不从心了。

对于加载慢，尤其是外部资源加载失败的情况，load事件可能永远不会触发，或者触发得很晚。这时，你可能需要一些超时机制。比如，你可以设置一个计时器，如果在一定时间内load事件还没触发，就认为加载失败或者超时。

const loadTimeout = setTimeout(() => {
    console.warn('Page load timed out after 10 seconds. Some resources might not have loaded.');
    // 可以触发一些错误处理或降级逻辑，例如显示一个加载失败的提示
    document.body.classList.add('load-failed');
}, 10000); // 10秒超时

window.addEventListener('load', () => {
    clearTimeout(loadTimeout);
    console.log('Page fully loaded within timeout.');
    document.body.classList.add('load-complete');
});

更复杂的场景是动态内容。如果页面初始化时DOM是空的，内容是JS异步加载并插入的，那么DOMContentLoaded和load事件可能在你内容还没影儿的时候就触发了。这种情况下，你判断的就不是“页面加载完成”，而是“特定内容加载完成”。这就需要更精细的控制了：

• 回调函数/Promise链: 在异步请求数据并渲染完成后，执行你的后续逻辑。这是最常见且推荐的做法。当你发起一个API请求，然后在数据返回后渲染DOM，你的“加载完成”点就是渲染结束的那一刻。

  fetch('/api/data')
      .then(response => response.json())
      .then(data => {
          // 根据数据渲染页面
          const contentDiv = document.getElementById('dynamic-content');
          contentDiv.textContent = data.message;
          console.log('Dynamic content loaded and rendered!');
          // 此时，可以认为特定内容已加载完成
      })
      .catch(error => {
          console.error('Error loading dynamic content:', error);
      });

• MutationObserver: 如果你需要监控DOM树的任意变化，例如某个特定的元素被添加到页面中，MutationObserver是一个强大的API。它可以监听DOM节点的增删改，让你在特定元素出现时执行代码。虽然这不直接是“页面加载完成”，但对于判断动态内容是否就绪非常有用。

  // 示例：监听某个特定ID的元素是否被添加到body中
  const observer = new MutationObserver((mutationsList, observer) => {
      for (const mutation of mutationsList) {
          if (mutation.type === 'childList') {
              const targetElement = document.getElementById('my-dynamic-content');
              if (targetElement) {
                  console.log('Dynamic content element is now in the DOM!');
                  // 在这里执行依赖于该动态内容的逻辑，例如初始化该元素上的JS组件
                  targetElement.style.color = 'blue';
                  observer.disconnect(); // 找到后就可以停止观察了
                  return;
              }
          }
      }
  });
  
  // 开始观察body元素及其子元素的变动
  observer.observe(document.body, { childList: true, subtree: true });
  
  // 模拟异步加载内容并在2秒后插入DOM
  setTimeout(() => {
      const div = document.createElement('div');
      div.id = 'my-dynamic-content';
      div.textContent = 'This content was loaded dynamically!';
      document.body.appendChild(div);
  }, 2000);

  这种方法尤其适用于那些你无法直接控制异步加载逻辑，但又需要知道某个特定DOM元素何时出现的场景，比如处理第三方库或组件的行为。

预加载、懒加载与页面加载状态的关联

说到页面加载完成，就不得不提预加载（Preload）和懒加载（Lazy Load）这些优化手段，它们其实都在某种程度上改变了我们对“页面加载完成”的传统认知。

预加载：它允许你提前加载一些资源，这些资源可能在当前视图中还不需要，但很快就会用到。比如，你可以用来告诉浏览器，这个图片我很快就要用，你先给我下下来。这会加速后续内容的呈现。在这种情况下，load事件可能还是会等待这些预加载资源，但用户感知到的速度会更快，因为资源已经缓存好了。它更多是优化了资源获取的时机，而不是改变了“完全加载”的定义。

懒加载：这个就更有意思了。图片或iframe等资源，只有当它们进入用户视口时才开始加载。这意味着，当load事件触发时，页面上可能还有很多图片根本没加载。传统的“页面加载完成”在这里就不那么准确了。对于懒加载的场景，你可能需要结合IntersectionObserver来判断特定区域的图片是否已经加载，或者监听图片自身的load事件。

// 简单的图片懒加载示例（HTML中img标签使用data-src）
// 假设你的HTML结构是这样的：
// 
// 
// ...

document.addEventListener('DOMContentLoaded', () => {
    const lazyImages = document.querySelectorAll('img.lazy');

    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src; // 将data-src赋值给src，开始加载图片
                    img.classList.remove('lazy'); // 移除lazy类
                    observer.unobserve(img); // 停止观察已加载的图片
                }
            });
        }, { rootMargin: '0px 0px 100px 0px' }); // 提前100px加载，提升用户体验

        lazyImages.forEach(img => {
            observer.observe(img);
        });
    } else {
        // Fallback for

今天关于《JS页面加载完成判断方法大全》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！