如何在所有页面完全加载之前隐藏页面的各个部分

Question

在我的页面完全加载之前，它变得非常糟糕。

我可以使用预加载器解决这个问题。但我不想那样。

我在很多网站上看到这个。某些部分在页面完全打开之前会显示一定的动画。然后，当各部分完全打开时，页面就会呈现所需的形式。

如何以及哪种工具可以帮助我？

Answer 1

对于解决方案，您必须使用 Angular、React 或 Vue 等 JS 框架。他们使用生命周期钩子。更有可能使用 before mounted 和 mounted 生命周期钩子执行操作直到项目完全加载，然后执行不同的操作。

更多信息请查看：

ReactJS, Angular, VueJs

Answer 2

您可以在要等待页面完全加载的元素的样式中添加 display:none。完全加载后，您运行 a JavaScript 一次显示所有元素。

我个人喜欢用jQuery

$(window).on('load', (e) => {  

    let element_one = $('#element_one_id');
    let element_two = $('#element_two_id');

    // make elements visible

    element_one.css('display','block');
    element_two.css('display','block');

}

如何在所有页面完全加载之前隐藏页面的各个部分

How to hide the parts of page before all of them loads completely

html

css

lazy-loading