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)将不再发生在该按钮上，因为它已经具有类。