What is the best way to prevent FOUC on a jquery ui button?

I have a page with a few buttons on it that have a class on them. When the page loads I am using jQuery UI .button function inside a ready function to turn these buttons into jquery UI buttons.

I want these buttons to look exactly the same when the page is loading as they do when the page is fully loaded. However currently, they look very ugly while loading and then pop to the jquery ui button look once the page is fully loaded.

I have tried adding the following to the class, which styles them correctly except for the padding,

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

Is adding these classes to the button the best way to style the button ahead of time? Or is there开发者_开发问答 a better way to fix this issue?

If you are making all your buttons jQuery UI buttons, you could initially hide all the buttons, like the following:

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

And when rendering the button you show them, e.g.

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

That is probably the best way.

You should inspect your layout in firebug after jquery UI adds all of its classes (to make sure you're not missing any), and hardcode all of those classes to your elements ahead of time.

The only potential problem arises if you're dynamically setting focus to certain jq-ui elements on pageload. For example, you wouldn't want element 1 hardcoded to "ui-active" state if the url specifies element 3.