jquery - 防止 jquery ui 按钮上的 FOUC 的最佳方法是什么？

Question

我有一个页面，上面有几个按钮，上面有一个类。当页面加载时，我在就绪函数中使用 jQuery UI .button 函数将这些按钮转换为 jquery UI 按钮。

我希望这些按钮在页面加载时与页面完全加载时看起来完全相同。然而目前，它们在加载时看起来非常难看，然后在页面完全加载后弹出到 jquery ui 按钮。

我尝试将以下内容添加到类中，除了填充之外，它们的样式正确，

ui-button ui-widget ui-state-default ui-corner-all

将这些类添加到按钮是提前设置按钮样式的最佳方法吗？或者有更好的方法来解决这个问题吗？

Answer 1

如果您要将所有按钮制作为 jQuery UI 按钮，则最初可以隐藏所有按钮，如下所示:

button, input[type=button] /* and others, e.g. submit, reset, anchors */
{ visibility: hidden; }

当渲染按钮时，您会显示它们，例如

$(':button, :submit, :reset')
  .button()
  .css({opacity: 0.0, visibility: "visible"})
  .animate({opacity: 1.0});