gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 00:06:58 26 4
gpt4 key购买 nike

我一直在尝试在 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

最佳答案

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
}

关于javascript - 验证 : Hide a skeleton loader after a element loads,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60297446/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com