Vuetify：资源加载完成后隐藏骨架加载器的问题排查

你的问题核心在于错误依赖了Vue的updated生命周期钩子来监听document.readyState的变化——updated只有在组件自身响应式数据变化引发DOM更新时才会触发，它不会主动监听全局的资源加载状态，所以当document.readyState变为complete时，updated可能根本没机会执行，自然无法更新你的loading和loaded属性。

下面是正确的实现方案：

正确做法：监听全局load事件 #

要等待所有资源（包括图片、样式表等）加载完成，应该监听浏览器的load事件，同时在组件挂载时先检查当前状态，避免错过已经完成的加载状态。

修改后的代码 #

<template>
  <div>
    <v-skeleton-loader 
      v-if="loading" 
      transition="fade-transition" 
      type="card"
    ></v-skeleton-loader>
    <v-card max-width="344" v-show="loaded">
      <!-- 你的卡片内容，比如图片、文本等 -->
    </v-card>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: true,
    loaded: false
  }),
  mounted() {
    // 先检查当前文档状态，如果已经加载完成，直接更新状态
    if (document.readyState === 'complete') {
      this.endLoading()
    } else {
      // 否则监听全局load事件，等待所有资源加载完成
      window.addEventListener('load', this.endLoading)
    }
  },
  beforeUnmount() {
    // 组件卸载前移除事件监听，防止内存泄漏
    window.removeEventListener('load', this.endLoading)
  },
  methods: {
    endLoading() {
      this.loading = false
      this.loaded = true
    }
  }
}
</script>

关键细节解释 #

1. 为什么不用updated？
   updated钩子的触发时机是组件的响应式数据变化导致DOM更新后，它和全局资源加载状态没有关联。如果页面加载速度快，document.readyState变为complete时，组件的updated可能已经执行过了，此时你的判断代码根本不会触发；如果加载慢，updated可能只在初始渲染时执行一次，之后不会再触发，自然无法捕获到readyState的变化。

2. load vs DOMContentLoaded？

   • 如果你只需要等待DOM结构渲染完成（不需要等图片等资源），可以用DOMContentLoaded事件；
   • 你的需求是等待所有资源（如图像）加载完成，所以必须用load事件——它会在所有资源（图片、字体、样式表等）都加载完成后才触发，完全匹配你的场景。

3. 为什么要移除事件监听？
   如果不移除，当组件被销毁后，事件监听仍然存在，会导致内存泄漏，所以必须在beforeUnmount钩子中清理。

可选：针对单个组件内的资源监听 #

如果你的v-card里只有特定的图片需要等待，也可以单独监听这些图片的load事件，而不是等待全局资源加载完成。比如：

<v-card max-width="344" v-show="loaded">
  <img 
    src="/your-image.jpg" 
    @load="endLoading"
    @error="endLoading" <!-- 处理图片加载失败的情况 -->
  >
</v-card>

这种方式更精准，适合只需要等待局部资源的场景。

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