如何在Vue.js项目中判断浏览器页面是否处于加载状态？

嘿，关于这个问题，其实我们可以借助浏览器原生的API来实现，刚好能对应你提到的Chrome那类浏览器显示圆形加载动画的状态～

浏览器本身提供了document.readyState属性，它能直接反映当前页面的加载状态，一共有三个值：

• loading：文档正在加载中，也就是你看到浏览器显示加载动画的时候
• interactive：文档的DOM结构已经加载完成，可以访问，但图片、样式表这类子资源还在加载
• complete：页面所有资源（包括图片、脚本、样式等）都加载完成，加载动画会消失

接下来我给你分Vue2和Vue3两种情况，说说具体怎么在项目里用：

方法一：通过document.readyState判断并监听状态变化 #

Vue2 组件示例 #

export default {
  mounted() {
    // 初始化时检查当前状态
    if (document.readyState === 'loading') {
      console.log('页面还在加载中，浏览器显示加载动画');
    } else if (document.readyState === 'complete') {
      console.log('页面已经完全加载完成');
    }

    // 监听加载状态的变化
    document.addEventListener('readystatechange', () => {
      console.log('当前页面加载状态:', document.readyState);
      if (document.readyState === 'complete') {
        // 这里可以写页面完全加载后的业务逻辑
        this.handlePageLoaded();
      }
    });
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    document.removeEventListener('readystatechange', this.handlePageLoaded);
  },
  methods: {
    handlePageLoaded() {
      // 比如初始化页面数据、调用接口等操作
      console.log('页面所有资源加载完成，开始执行后续逻辑');
    }
  }
}

Vue3 组合式API示例 #

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const handlePageLoaded = () => {
      console.log('页面所有资源加载完成，开始处理业务');
    };

    onMounted(() => {
      // 初始化检查状态
      if (document.readyState === 'loading') {
        console.log('页面正处于加载状态');
      }

      // 监听状态变化
      document.addEventListener('readystatechange', () => {
        console.log('加载状态更新为:', document.readyState);
        if (document.readyState === 'complete') {
          handlePageLoaded();
        }
      });
    });

    onBeforeUnmount(() => {
      // 组件销毁时移除监听
      document.removeEventListener('readystatechange', handlePageLoaded);
    });

    return { handlePageLoaded };
  }
}

方法二：监听window的load事件 #

如果你只关心页面所有资源完全加载完成的时刻（对应加载动画消失的节点），可以直接监听window的load事件，它会在所有资源加载完毕后触发：

Vue2 示例 #

export default {
  mounted() {
    // 如果页面已经加载完成，直接触发逻辑
    if (document.readyState === 'complete') {
      this.handlePageLoaded();
    } else {
      window.addEventListener('load', this.handlePageLoaded);
    }
  },
  beforeDestroy() {
    window.removeEventListener('load', this.handlePageLoaded);
  },
  methods: {
    handlePageLoaded() {
      console.log('页面所有资源加载完成');
      // 执行你的业务操作
    }
  }
}

Vue3 示例 #

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const handlePageLoaded = () => {
      console.log('页面所有资源加载完成，开始执行后续操作');
    };

    onMounted(() => {
      if (document.readyState === 'complete') {
        handlePageLoaded();
      } else {
        window.addEventListener('load', handlePageLoaded);
      }
    });

    onBeforeUnmount(() => {
      window.removeEventListener('load', handlePageLoaded);
    });

    return { handlePageLoaded };
  }
}

小补充 #

如果你不需要等图片这类子资源，只想判断DOM结构是否就绪（比如可以操作DOM元素了），可以监听document的DOMContentLoaded事件，它对应readyState的interactive状态，会在DOM构建完成后立即触发，不用等子资源加载。

内容的提问来源于stack exchange，提问作者qg_java_17137