should jquery tabs be inside document.ready?

Question

I am a little confused as to what exactly document.ready does. According to the tutorial by john resig, document.ready should contain code that needs to be ran when the page is done loading.

What if I have code that declares tabs..or code that puts zebra stripes on tables?

should all that go under document.ready? Wont' there be cases when users see the content loaded first and then see zebra highlights and tabs loaded?

Answer 1

Excellent point.. but the problem is what if you run your zebra stripes code BEFORE the content its affecting is loaded? There in lies the rub.

It is possible to sprinkle your JS within your content, so that the content above it will of course be loaded before it runs... but are the required jquery libs that this JS needs loaded as well? Now theres just more that can go wrong.

Also keep in mind that the jquery Ready event is still going to run before the classic document.onLoad event. (which waits for images to finish loading as well)

Answer 2

In general, if it affects anything within the DOM, you should put it inside document.ready. So yes, your tabs and zebra stripes should go there.

Answer 3

You should put code for jQuery tabs inside the onDOMReady function. To be on the safe side use the function that jQuery provides:

$(function(){
    //put your tab / zebra stripes code here
});

By using this function you are ensuring that the necessary code is run when the DOM is ready for modification (but the page itself may not have loaded completely). Your other code that loads on document.ready would probably be better off inside this function as well, as using document.ready can cause users to see flickers on screen when you are loading dynamic JavaScript.

Answer 4

Of course you could always just use classic javascript for simple things like zebra-stripes, and jQuery for the more difficult things.

Answer 5

The ready event fires when the DOM has been completely loaded whereas the load event fires when DOM is loaded + all the images referenced by the DOM are also downloaded.

This means that unless your initialization code uses images from the DOM, you should use the ready event. See this page for example on what happens if you try to access images from the DOM in your load event.