css加载很晚，所以html看起来很奇怪

Question

我有一个常见的问题，我有一个用HTML，CSS和JQuery完成的网页。当页面开始加载时，它首先加载html并显示一秒钟的div，这些div应该被css和jquery隐藏。但一秒钟后，它看起来很完美。但第一秒看起来很可怕。我怎么能避免这种情况？

Answer 1

我没有这样的经历，但我认为你的脚本的加载过程应该有帮助。根据页面的意图（我不知道），我更喜欢你尝试加载这种方式。

使用CSS显示div

<div style="display: none;">Hidden by default</div>

在关闭正文标记之前加载JQuery文件。

当页面完全加载后，它可以正常运行。

Answer 2

$(this).hide();或$(this).addClass('.hidden');总是慢于.class { display:none; }

jQuery必须等待DOM加载。 CSS没有。设置CSS以隐藏加载时需要隐藏的元素，然后使用jQuery显示这些元素。

Answer 3

一个肮脏的解决方案是内联css：

<div style="display: none;">This will be hidden</div>

更好的解决方案是使用javascript按需构建这些元素。

Answer 4

如果您希望css更快地呈现，最好将隐藏的css语句移动到它们自己的小文件中，或者更好的是实际上将隐藏的css添加到页面上的<style>标记中。这意味着它们几乎立即呈现。

关于jQuery - 正如Scott所提到的 - 你可以希望最快的是dom ready。如果您正在等待窗口加载，这将更慢。使用纯JavaScript，您可以在需要隐藏在页面中的元素之后放置脚本标记。然后，您可以使用doument.getElementById直接定位它们，并将display设置为none，而无需等待页面准备就绪。