BACKTRACE

(condense)

Back to Posts List

GET

JQuery's ready() runs before load() event?

In the JQuery documentation entry about ready, it’s mentioned that the ready() function is somewhat a replacement to the onload event, and should be used to traverse and manipulate the DOM when it’s ready.

What is “when it’s ready” than?
When the DOM is ready, means that the browser finished reading all your document, parsed it and is ready to display it, but still didn’t display it so nothing is visible yet. That means that if you need to make some GUI adjustments, that’s the place.
if you use the onload event callback, the function will run after the document is displayed, not only parsed.
For example, if we want a hidden paragraph to show:


hi! i’m hidden!


Using the ready() callback like that:

$(document).ready(function () {
$(“p.hidden”).fadeIn();
})


will trigger the fadeIn effect before the page is displayed, and by that probably will cause the fade effect to look weird .

using the onload event:


// ATTN: runs on window, not on document
$(window).load(function(){
$(“p.hidden”).fadeIn();
})

will first display the page without the hidden paragraphs and when the page is displayed and ready, the fadeIn effect will kick in

POST

blog comments powered by Disqus

I Don't have cookies.

ELAD ENV

Variable Value
LINKEDIN
TWITTER
FACEBOOK
GITHUB
WWR
IRC
{ 'irc.freenode.net' => [ '#rubyonrails', '#railsbridge', '#ruby', '#mootools' ]}
SKYPE
eladmeidar

You're seeing this error because I think it is funny.