隐藏在页面开始加载大量的JQuery

的我建立一个网站时发生的闪光灯和其他脏的效果，我可以看到的是，更多的代码，我在JQuery的正文中添加，隐藏在页面开始加载大量的JQuery

$(document).ready(function($){ 
    ... 
});

的我在加载网站所需的第一秒内产生了更多恼人的效果。我可以看到所有的元素都没有风格，然后移动/变形，直到我在第二秒后达到研究的外观。

现在只需要一秒钟，但我无法想象要开始生产这种显示错误。

是否有人曾经处理过这种效应？你会推荐什么？

非常感谢球员;）

更新：我不是通过JQuery的做任何丑陋的CSS。我只是碰巧使用了几个不同的插件。最讨厌的是我正在使用的Jqx菜单。在jquery完成转换之前，我可以看到文本没有显示。

来源

2011-12-15 Jerome

您可以隐藏页面的内容，然后再次显示在页面加载完成后。

将这个刚刚开放body标签后：

<script type="text/javascript"> 
    $('body').hide(); 
    $(window).load(function() { $('body').show(); }); 
</script>

不是说这是做到这一点的最好办法，但应防止风格闪烁。

来源

2011-12-15 14:54:53

这本来不错。它完美地工作，但我的菜单后来看起来不太一样。不知道可能来自哪里。 – Jerome 2011-12-15 18:14:08

使用CSS而不是jQuery来应用您的初始样式！

来源

2011-12-15 14:46:02 karim79

Hy，
你可以试着通过Yahoo SmushIt来擦掉你的照片。
这将删除图像中的每一个不必要的位。
秒你可以压缩你的.js和.css文件，通过http://jscompress.com/和http://www.lotterypost.com/css-compress.aspx增加更多的速度。

如果您使用jQuery来改变立即使用CSS的所有变化，请使用CSS！

来源

2011-12-15 14:46:47

如果您使用$(document).ready(...);来分配类，禁用元素，移动它们等，那么您可能会错误地做到这一点。尽可能在HTML中分配类/样式，而不是在页面使用Javascript完成加载后进行。而不是做这样的事情：

<input type="text" id="exampleTextInput" name="example"> 

<script> 
$(document).ready(function() { 
    $('#exampleTextInput').addClass('exampleClass'); 
}); 
</script>

做，而不是执行以下操作：

<input type="text" id="exampleTextInput" name="example" class="exampleClass">

来源

2011-12-15 14:52:14

隐藏在页面开始加载大量的JQuery

回答

相关问题