应该采用什么策略来尽量减少页面初始化抖动？

当使用框架（如jQuery/UI）（如按钮小部件）时，页面会在页面加载时处理布局时抖动。我想知道什么是最大限度地减少这种情况的最佳策略？应该采用什么策略来尽量减少页面初始化抖动？

我已将body标记设置为display: none，然后$(function() { ${'body').show(); })虽然我必须想知道是否有更好的方法，但它的工作原理。

2013-04-09 Brett Ryan

不确定，但这确实看起来像使用了很多方法。我注意到很多网站在它的元素被完全加载之前不会显示数据。 – PsyKzz 2013-04-09 14:50:39

如果你给元素提供jQuery ui在给它们初始化时给它们的类/结构，那么抖动将不太明显，甚至可能消失。 – 2013-04-09 14:56:52

最无缝的解决方案是为元素提供jquery ui在初始化后给它的类/结构。

使用一个jQuery UI按钮为例，这里是前：

<input type="submit" value="A submit button" />

，这里是后：如果您使用

<input type="submit" value="A submit button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">

后，而不是之前在你的实际的HTML中，当您使用jQuery UI对它进行初始化时，抖动（也称为FOUC）不会再发生在该按钮上，因为它已经有了这些类。

2013-04-09 15:12:59

感谢凯文，这是一个简单按钮的好方案，但更复杂的元素如表格（我使用jqGrid）和jQuery/UI选项卡控件呢？ – 2013-04-10 01:05:37

您是否认为现在使用“body”的隐藏/显示有任何内在危险？在这种情况下，尽管你得到了FOWC :) – 2013-04-10 01:08:18

好吧，隐藏/显示身体并不能真正阻止FOUC，它只是使它更加统一。你可以在所有jQuery UI的东西（包括标签）上使用相同的技术，但是通过网格，你可以通过隐藏网格本身直到它准备好，或者最初以“加载...”状态显示。 – 2013-04-10 04:49:47

回答