What is the most reliable way to fire a JS event after all elements in the document have fully loaded?

Question

Looking for the most reliable way to detect with JS when an entire HTML document and all peripherals (background images, CSS, JS, etc.) have finished loading. Doesn't have to be jQuery-specific.

Answer 1

With jQuery, I always use the shorthand method for .ready()

$(function() {

});

If you're looking for images, too, you can use .load()

$(window).load(function() {

});

---

For alternative, vanilla methods, check out the answers to this question.

Answer 2

$(window).load(function(){
 // background images, CSS, JS.. everything is loaded
});

Answer 3

In vanilla JS you would use:

window.onload = function() {
//your code here
};

From the Mozilla Documentation for "window.onload":

"Notes

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading."