Javascript like $(document).ready() for "modern HTML5" browsers

Randy Hall picture Randy Hall · Mar 22, 2013 · Viewed 18.7k times · Source

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

Zeta picture Zeta · Mar 22, 2013
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" ...>