I have a page what contains a long running Ajax request on loading one of its element (a 3rd party grid component). This Ajax request delays the firing of the ready event on the document. I use jQuery UI plugins (button, dilog). I used to apply them on elements inside the $(document).ready handler, but now in this case until the Ajax process finishes, I see lots of pure, unformatted ugly elements. The request could take up to 4-5 seconds, so it is quite annoying. What could be a good solution for this scenario?
I could probably hide the corresponding elements until the request finishes, and then show them, but I would prefer some more generic technique if there is any.
In addition, unfortunately I don't have too much control over this component, so I cannot control when and how it is loading its data.
EDIT: The request delaying the ready event is of course not an Ajax request, it is the long processing of the component's MVC partial view. But the problem still exists, because the other parts of the page ("above" this area) loads earlier.
EDIT: I'm working in ASP.NET MVC3, probably some output buffering technique would help, which would prevent flushing any content until the whole request is processed (something like ob_XXX functions in PHP).
Until I find a more appropriate technique probably in server-side, I added a special CSS class to these elements with a name "hidden-until-ready", which defines "display: none". In document ready event I do a one line jQuery to show them just before applying the plugins. Thanks for the responses.