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

Question

我有一个页面，上面有几个按钮，上面有一个类。当页面加载时，我在ready函数中使用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});

Answer 2

这可能是最好的方法。

在jquery UI添加所有类之后，你应该在firebug中检查你的布局（以确保你没有遗漏任何类），并提前将所有这些类硬编码到你的元素中。

如果您在页面加载时动态设置焦点到某些jq-ui元素，则会出现唯一的潜在问题。例如，如果url指定元素3，则不希望元素1硬编码为“ui-active”状态。