jQuery: document ready fires too early for my requirements..

Question

Hey there guys,

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

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 2

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 3

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 4

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 5

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