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

【问题标题】：Is there a way to hide all contents of a page and only show them after the page completely loads?有没有办法隐藏页面的所有内容并仅在页面完全加载后显示它们？
【发布时间】：2020-01-19 13:34:16
【问题描述】：

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

我已经尝试过使用 v-show、v-if，但它不起作用。我也使用mounted 和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 中的所有内容。

提前致谢

【问题讨论】：

将您的外层HTML的显示设置为“无”或高度设置为“0”，并且仅当 this.busy == True 时才恢复它
也许你可以试试这个：stackoverflow.com/questions/42262007/…
如果您能回答“所有内容都已加载”的含义，您可以在代码中对其进行描述，然后您几乎可以轻松调用document.body.classList.remove("loading")。然而，隐藏东西的想法通常是一个非常糟糕的想法：并不是每个人都启用了 JS，人们仍然应该看到一个基本的网站，有方法来获取该内容你隐藏纯粹是出于审美原因。功能胜于形式使网络变得伟大。形式重于功能让它看起来不错，但也会导致更糟糕的网络体验。
为禁用 js 的人构建网站。是的，现在每个人都在这样做......
恕我直言，这样做的网站使用起来非常烦人，尤其是在互联网连接速度较慢的情况下。如果是 SPA 会稍微好一点，但仍然不是最好的。

标签： javascript html function class vue.js

【解决方案1】：

首先使用一些 CSS 隐藏正文：

<body style="display:none">

然后在正文末尾设置脚本：

<script>
    document.body.style.display="block";
</script>

当文档开始加载时，CSS 会在开始时隐藏整个正文。当文档完全加载后，我们的脚本会将正文样式更改为display:block

你也可以使用这个技巧显示loaders

【讨论】：

【解决方案2】：

你可以这样做：使用

初始化你不想显示的样式

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

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

yourStyleObject: {
display: 'none';
}

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

如果你尝试使用 v-if 阻止渲染，它在挂载之前将无法工作，它会先呈现，以便在挂载后隐藏

【讨论】：