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

问题描述：

我有一个共同的问题，我有一个用HTML，CSS和JQuery完成的网页。当页面开始加载时，它首先加载html，并显示div应该被css和jquery隐藏的第二个div。但过了一秒钟，它看起来很完美。但是，第一秒看起来很糟糕。我怎样才能避免这种情况？css加载晚，所以html看起来很奇怪一秒

您的CSS文件是否链接到文档的HEAD中？ – 2013-03-16 11:21:43

是的，它在头部链接 – 2013-03-16 11:21:59

你是通过jQuery来设置类，然后隐藏类，或者你是否使用jquery来隐藏？将CSS设置为'display：none;'然后使用jquery显示通常会更快。它不一定是内联CSS，但在CSS而不是jQuery中速度更快。 – Scott 2013-03-16 11:31:23

答

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

显示使用DIV + CSS

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

你的身体标记闭幕前装入JQuery的文件。

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

答

脏的解决办法是内联的CSS：

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

一个更好的解决方案是建立在使用JavaScript需要这些元素。

好吧，我的项目很大，所以我不能那样做。 – 2013-03-16 11:25:15

哪一个你不能做？ – erenon 2013-03-16 11:26:12

我不能使用内联的CSS – 2013-03-16 11:28:18

答

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

jQuery有等待DOM加载。 CSS不。设置你的CSS来隐藏你需要隐藏的元素，然后使用jQuery来显示这些元素。

答

如果你希望你的css渲染速度更快，最好将隐藏的css语句移动到他们自己的小文件中，或者更好的是在页面上的<style>标签中添加隐藏的CSS。这意味着它们几乎立即被渲染。

关于jQuery —作为斯科特提及—最快，你可以希望在dom ready射击。如果您正在等待窗口加载，则会更慢。使用纯JavaScript，您可以将脚本标签放置在需要隐藏在页面中的元素之后。然后，您可以直接使用doument.getElementById来定位它们，并将它们的display设置为none，而无需等待页面准备就绪。

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

相关推荐