When Does jQuery Consider The DOM Loaded And Can I Use It Beforehand

Posted March 15, 2007 at 2:30 PM by Ben Nadel

Tags: Javascript / DHTML

Reader Comments

Interesting find. This is particular useful for code that as to run before the user can see anything at all, especially when the page isn't send to the browser in one big chunk.

On the other hand, I can hardly imagine a case where adding event handlers like clicks to the document can't wait for jQuerys DOM ready event.

I'll give it a try on a particular problem that could benefit from a faster "DOM ready".

I am not worried about the "everyday" examples. But, if you have a site that has constant navigation and variable content (pretty much every site), you have to imagine that every now and then you might have a page whose content takes a long time to load (maybe someone wrote a crappy query and they are accidentally building a table that has 1000 rows)... whatever the reason, as long as it is always works, it seems like a good safety measure to apply events as they can be....

Of course, I am just getting into jQuery, so I might be way off.

Hey Ben, I'm glad Joern chimed in here. He's the team lead for the jQuery Core team so definitely offer him up feedback. He's a cool dude and an awesome developer.

Hey, it's my pleasure to be messing with jQuery.

I know of lots of pages that load the header and then access some slow ass content management system and take forever to load up the rest of the content.

There is nothing wrong with having the jQuery to bind the nav included after the nav loads.

The rules are exactly like regular javascript. You cant access something that doesn't exist. Once it's in the DOM then you can play with it.

If you know it might be a delay between NAV and rest of page, then for sure, bind those suckers early.

Glen

Even with the early bind, I think it is still a hell of a lot more elegant that have a lot of JS wrapped up in the HTML markup.

I actually thought of this while sleeping. It probably has bugs, I havent tested, but its in the ballpark.

Assuming you had your header in an include file....the include should look something like:

<ul class="header">
<li title="Home">Home</li>
<li title="Products">Products</li>
<li title="Support">Support</li>
<ul>

Then on the specific page: (let's say the product page)
<inlude header.cfm>
<script>
initHeader("Products");
<script>

Then the jQuery would be:
function initHeader(target) {
var onLink = $("ul.header li[@title=" + target + "]")
$(onlink).addClass("on");

$("ul.header li").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

$("ul.header li").bind("click", function(){
navigate()
});

}

function navigate() {
var newPage = $(this).attr("title");
location.href = "http://www.mysite.com/" + newPage + ".cfm"
}

Anyway, the point is, the header wouldn't have any information about anything.

I would feel OK doing something like that. I think it still keeps the HTML very clean.

My only nit-picky thing (and I know this was just a demo), but I wouldn't bind click events for navigation. Navigational links should probably exist with or without Javascript.

CreateObject(
"java",
"java.lang.Thread"
).CurrentThread().Sleep(
JavaCast( "long", (3 * 1000) )
)

should be written as

CreateObject(
"java",
"java.lang.Thread"
).Sleep(
JavaCast( "long", (3 * 1000) )
)

since sleep is a static method

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment