Monday, July 20, 2009

Brief display of unformatted text while jquery-ui or yui loads

On our new site I was seeing ugly unformatted text for a second while the jquery or yui widget loads. I didn't find anything about how to deal with that, but Michael of Amptools showed me the light.

1. Add style="display: none" to the element. Not in the stylesheet.

2. In the js for the dom event watcher, after the element loads, make it visible, like so:

(function () {
var carousel = null;
setTimeout(function() {

YAHOO.util.Event.onDOMReady(function (ev) {
var carousel =
new YAHOO.widget.Carousel("carousel-element",{
animation: { speed: 1 }
});

carousel.set("numVisible", 4); // override the default
carousel.set("revealAmount", 0);

carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
jQuery("#carousel-element").slideDown();
});
},25);
// timeout is necessary for Safari and Chrome.
// Can be increased.
})();

No comments:

Post a Comment