1

I'm really confused now, I thought jQuery(document).ready(function(){ ... }) was triggered when the page ends to load all the stuff in.

Well it doesn't look like that though, I was just experiencing : uploading large pictures in my page and add an alert to my ready function. It appears the alert is splashing before the images in the background has finished to be downloaded... Is it a way to wait that the communication between the agent user and the http webserver get down to call a ready function ? I mean I want to make visitors waiting with a big black div and 'loading' text in it until all the elements are outputted (and then release the div).

vdegenne
  • 12,272
  • 14
  • 80
  • 106

6 Answers6

4

The ready event is fired when all of the DOM elements are loaded, but not before any images referenced by those elements are finished loading. You probably want to use the load event instead which will wait until images have been loaded. Note the caveats in the documentation.

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Ex:

$(window).load( function() { ... do stuff ... } );
tvanfosson
  • 524,688
  • 99
  • 697
  • 795
1

From my understanding it's when the dom has loaded. That would include all script files and I would assume css files. But it wouldn't include images. I wonder if using the window.onload = function(){} would be a better choice.

window.onload vs $(document).ready()

Community
  • 1
  • 1
ek_ny
  • 10,153
  • 6
  • 47
  • 60
1

window.onload is called when everything on the page as loaded. So the DOM, scripts, css and images.

document.ready is called when the DOM has finished being constructed, as it is then at a stage when it can be manipulated/accessed. So in this case the img html as loaded but not the image resource.

You could do a load event for that image:

$("#image").load(function(){

    $("#div_you_want_to_hide").hide();  

});

Or just wait for the window to load completely:

$(window).load(function(){

    $("#div_you_want_to_hide").hide();  

});
Tomgrohl
  • 1,767
  • 10
  • 16
0

As you can see in the annotated source, the jQuery ready is just adding a listener for the DOMContentLoaded event for most browsers, and for ol' IE, it adds to onreadystatechange, and onload.

From the MDN documentation, "The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading"

To wait for the full page, just use the load listener, or the jQuery(window).load(...) that wraps it.

NoBugs
  • 9,310
  • 13
  • 80
  • 146
0

It is simply for when the DOM is ready, not when all the resources have been loaded. Check this to find out how to check that images have loaded:

http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/

Alex
  • 7,320
  • 1
  • 18
  • 31
0

ready event triggerd after all DOM is fully constructed. if you want to wait until images have been loaded you can use load event

Amir Ismail
  • 3,865
  • 3
  • 20
  • 33