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

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 而不是 before，则当您使用 jQuery UI 初始化该按钮时，该按钮将不再发生抖动（也称为 FOUC），因为它已经具有类。