When does document.ready actually fire?

Question

Let\'s consider the following case:

There is a 2.5MB image in an tag and I\'m on a slow connection which takes considerable time to download

Answer 1

As in the Documentation:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.

So it's when the tags are loaded, but not the actual data of the images.

An example of loading the images and triggering an event when they are loaded:

$(document).ready(function() {
  $("img").load(function() {
    alert('image loaded');
  }).each(function() {
    $(this).attr("src", $(this).attr("data-src"));
  });
});