类似于“现代 HTML5”浏览器的 $(document).ready() Javascript

Question

This is most likely already a question somewhere, but I cannot find it, as EVERY single search turns up jQuery questions.

I'm looking for a proven method to bind to the document being ready, much like jQuery's $(document).ready() . However, this is for a "modern browser only" page, with very light javascript, and I'd like to avoid loading jQuery here.

Would someone kindly point me in the right direction?

Thanks!

Answer 1

document.addEventListener('DOMContentLoaded', function () {
    /* ... */
});

The event "DOMContentLoaded" will be fired when the document has been parsed completely, that is without stylesheets* and additional images. If you need to wait for images and stylesheets, use "load" instead.

^{* only if the <script> is before the <link rel="stylesheet" ...>}

Answer 2

window.onload = function() {} is a standard from the long past ago, whereas it also waits for all the images to load, it is basically a working, functional alternative for some such cases also in all old browsers. A user usually still should wait a second till he makes a responsible action.

Edit : In my case, I needed it for all the libraries being loaded prior to anything else, as they were listed fixed in the footer (jquery). At it is mine dependency to continue to work with is possible just once it is loaded. So IMHO the fact that the user has to wait is irrelevant (unless I miss something here and am available to be explained), as it's the case with any way of jQuery loading, till it's not loaded it can't be worked with it. For the sake of that point ofc any way there must be a backend check as client-side js can be "intercepted". Waiting for an entire document to load is certainly more lengthy than using it just after its inclusion, however this is for cases when you eg. can't affect the order of html scripts, eg when you use it in own 3rd party package.