应该使用什么策略来最小化页面初始化抖动？

Question

当使用诸如jQuery / UI之类的框架（例如按钮小部件）时，页面将在页面加载时处理布局时抖动。我想知道最小化这个的最佳策略是什么？

我已将body标记设置为display: none，然后将$(function() { ${'body').show(); })设置为有效但我不得不怀疑是否有更好的方法。

Answer 1

最无缝的解决方案是为元素提供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中使用了after而不是之前的那个，那么当你用jQuery UI初始化它时，该按钮上将不再出现抖动（也称为FOUC），因为它已经有了类。