当使用诸如 jQuery/UI 之类的框架(例如按钮小部件)时,页面将在页面加载时处理布局时抖动。我想知道减少这种情况的最佳策略是什么?
我已经将body
标签设置为display: none
然后$(function() { ${'body').show(); })
哪个有效,但我不得不想知道是否有更好的方法。
最无缝的解决方案是为元素提供 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),因为它已经具有类。