javascript - 验证 : Hide a skeleton loader after a element loads

Question

我一直在尝试在 Vuetify 中创建一个简单的框架加载器，它在加载文档资源(如图像)时显示，然后在所有内容完全加载时隐藏(替换为 <v-card>)。

目前，我有这个 <v-skeleton-loader> :

<v-skeleton-loader v-if="loading == true" :loading="loading" transition="fade-transition" type="card">
</v-skeleton-loader>

我的 v-card元素使用 v-show像这样:

<v-card max-width="344" v-show="loaded">

对于响应式属性，我有:

data: () => ({
    loading: true,
    loaded: false
})

我正在尝试使用 updated 更新这些属性的值Vue.js 的生命周期钩子(Hook):

updated: function() {
    if (document.readyState == 'complete') {
        this.loading = false;
        this.loaded = true;
    }

}

目前，Vue Devtools 告诉我属性没有更新为在 updated 中定义的新值。钩。如何更改它以便在 readyState 时正确更新值DOM 已更改为 complete ？

Answer 1

updated仅在更新组件时调用钩子(Hook)。 Vue 生命周期与 DOM 事件无关。如果页面加载后没有更新，则不会触发 updated。

这可以通过常规的 DOM 事件监听器来完成:

created() {
  const readyHandler = () => {
    if (document.readyState == 'complete') {
        this.loading = false;
        this.loaded = true;
        document.removeEventListener('readystatechange', readyHandler);
    }
  };

  document.addEventListener('readystatechange', readyHandler);

  readyHandler(); // in case the component has been instantiated lately after loading
}