Question

I have a web page whose large parts are constructed on the front-end, in JavaScript. When the basic HTML is parsed and the DOM tree is constructed, the "ready" event triggers. At this event, a JavaScript code launches that continues with the construction of the web page.

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
});

As you can see in this tiny example,

• new elements are added to DOM
• more stuff, like images is being loaded
• ajax requests are being sent

Only when all of this finishes, when the browser’s loading progress bar disappears for the first time, I consider my document to be actually ready. Is there a reasonable way to handle this event?

Note that this:

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
    alert('Document constructed!');
});

does not suffice, as HTTP requests are asynchronous. Maybe attaching handlers to every single request and then checking if all have finished is one way to do what I want, but I’m looking for something more elegant.

Appendix:
A more formal definition of the event I’m looking for:

The event when both the document is ready and the page’s dynamic content finishes loading / executing for the first time, unless the user triggers another events with mouse moving, clicking etc.

Answer 1

As described here, you can sign up for load events for individual images when they finally load. However, as also described there, that may not be reliable across browsers or if the image is already in the browser’s cache. So I think at least part of that is not 100% trustworthy. With that said, you can easily hook to a bunch of different asynchronous events and then only react when all of them have completed. For example:

$(document.body).html('<img src="img.png" id="porcupine"/>');

var ajaxPromise1 = $.get(...);
var ajaxPromise2 = $.get(...);
var imgLoadDeferred1 = $.Deferred();

$("#porcupine").load(
  function() {
    imgLoadDeferred1.resolve();
  }
);

$.when(ajaxPromise1, ajaxPromise2, imgLoadDeferred1).done(
  function () {
    console.log("Everything's done.");
  }
);

If you want to allow for the fact that the image load may never generate an event, you could also set a timer which would go off eventually and try to resolve the imgLoadDeferred1 if it is not already resolved. That way you don’t get stuck waiting for an event that never happens.