时间戳

首页 > 解决方案 > 有没有办法隐藏页面的所有内容并仅在页面完全加载后显示它们？

javascript - 有没有办法隐藏页面的所有内容并仅在页面完全加载后显示它们？

问题描述

我试图隐藏我的登录模板，直到所有内容都加载完毕。现在发生的事情是，当我进入我的网站时，会加载模板，然后加载我的字体等。我不想向用户显示任何内容，直到我可以显示包含所有字体、图像和所有内容的页面。

我已经尝试过使用 v-show、v-if，但它不起作用。我也使用mountedwith this.$nextTick = false，但没有成功。

Busy 是我想用来控制页面是否可以显示的变量。

这是我的 div：

<div class="background kt-grid kt-grid--ver kt-grid--root kt-page" v-if="!busy">

这是我的脚本/导出默认值：

mounted: function(){
    this.$nextTick( function() {
        this.busy = false;
    })
}

我希望只有在页面完全加载后才能看到该 div 中的所有内容。

提前致谢

标签： javascripthtmlfunctionclassvue.js

解决方案

你可以这样做：使用初始化你不想显示的样式

<div :display="yourStyleObject">example</div>

在您的样式对象中，您可以传递如下内容：

yourStyleObject: {
display: 'none';
}

然后，在mounted() 函数中，将数据的值从display: 'none'更改为display: 'block'

如果您尝试使用 v-if 阻止渲染，它在安装之前将无法工作，它将首先渲染，因此它可以在安装后隐藏

推荐阅读