jQuery: document ready fires too early for my requirements

Question

I am developing a site based all around photos. Some areas of this site require calculations based on image dimensions in order to work correctly. What i have found is that document ready is firing too early and my gui is behaving erratically as a result.

I removed the document ready function and replaced it with the good 'ol window.onload function, since, if i read correctly, this function does not fire until images are fully loaded.

My question is, will this cause any problems? And are there any other solutions that i have missed perhaps?

Thanks for the help guys!!

Answer 1

There is no reason you cannot use $(window).load() as opposed to $(document.ready(). You are correct about the function not firing until images are fully loaded (or failed to load).

The drawback of fully relying on $(window).load() are that in some cases it is readily apparent none of your javascript is working (i.e. navigation or click events) until every single item on your page has loaded. Some users, usually a website's power users, click through pages quite rapidly and this detracts from the overall user experience.

The happy medium would be to use $(window).ready() for most situations and only put events inside $(window).load() that absolutely require them.

Answer 2

Try this instead:

$(window).load(function() {
 alert("images are loaded!");
});

See this link for a comparison of $(document).ready() and $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

Altough window.onload would suit your needs, I'd recommend speeding up the things a bit:

$("img.load").load(function(){
    alert($(this).width());
});

Now you can process image individually as quickly as it is loaded and not waiting for the whole set of elements.

Answer 4

Here’s a very simple solution:

Include the width="" and height="" attributes for all images. This will force the browser to render everything correctly and in place even before images are loaded. The space required for each image in the page's real estate will be properly set aside while images load.

That’s it!

If you do that, document.ready will work just fine in your scenario. What is happening is that the browser doesn't know the size of the images before they are retrieved/loaded, so the browser has to guess. That can cause the funny behavior. Specifying the width and height of your images will solve this problem.

I’m surprised no one mentioned that. It is not necessarily a javascript problem, although cballou's answer is definitely good advice.

Anyway, hope you learned something new. ;)

Answer 5

You could possible use the load() event in jquery, however in the documentation it is mentioned that it might not work as expected if the element already has loaded.

Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded. -- http://docs.jquery.com/Events/load

Answer 6

If you want to delay it with an amount of time given maybe you can use "setTimeout" :)