在页面组件加载之前隐藏部分答案

【问题标题】：Hiding parts before the page components loads在页面组件加载之前隐藏部分
【发布时间】：2021-03-05 13:58:35
【问题描述】：

当页面在某些部分（字体、必要的 css 文件）加载之前加载时，会出现非常不愉快的情况。

我在一些网站上看到，它们在页面组件加载之前隐藏了一些部分。

例如：

我不想在页面中放置预加载器。是否有针对该问题的策略或任何其他解决方案？

【问题讨论】：

标签： javascript css rendering

【解决方案1】：

它的名字是“骨架加载”。只需使用 HTML 和 CSS 即可。

如果你想不费吹灰之力直接使用它们，那里有一些库，只需搜索“Skeleton Loading”。或者我建议你看这个video。

【讨论】：

【解决方案2】：

这些页面使用 Angular、React 或 Vue 等 JavaScript 框架。他们使用一种叫做生命周期钩子的东西。我最熟悉 Vue.js，但根据调用时间/加载内容的不同，会有不同的。他们很可能使用 beforemounted 和mounted 生命周期钩子，该钩子执行操作直到项目完全加载，然后执行不同的操作。

如果您不使用库，并且正在寻找 - 我建议您使用 Vue.js，因为您无需安装/学习 node.js 即可在页面上使用它，只需要一个 CDN，并且我在下面使用的链接将向您展示如何防止页面元素在加载之前被查看。

https://v3.vuejs.org/api/options-lifecycle-hooks.html

https://angular.io/guide/lifecycle-hooks

https://reactjs.org/docs/state-and-lifecycle.html

【讨论】：