34

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!

Randy Hall
  • 6,322
  • 12
  • 57
  • 115
  • This has been asked a few times already. Please search before posting a question http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the – rzr Mar 22 '13 at 21:29
  • 1
    @rzr Read the question. I searched through pages of questions, and had trouble finding the answer. – Randy Hall Mar 22 '13 at 21:30
  • 1
    @rzr additionally, the question you linked to provides only cross-browser solutions, I'm looking for a specific subset. – Randy Hall Mar 22 '13 at 21:32

2 Answers2

45
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" ...>

Zeta
  • 95,453
  • 12
  • 173
  • 214
  • 1
    I'll accept when I can - plugged it in, works like a charm! Thank you much. – Randy Hall Mar 22 '13 at 21:26
  • 1
    @RandyHall: You're welcome. You might want to have a look at https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js (it's not a jQuery plugin, but a independent part of jQuery). – Zeta Mar 22 '13 at 21:27
  • 1
    window.addEventListener('load') looks like the way to go: http://stackoverflow.com/questions/16404380/why-doesnt-document-addeventlistenerload-function-work-in-a-greasemonkey-s – Rich Apodaca Apr 16 '14 at 21:00
  • 1
    @RichApodaca: Every _“modern HTML5” browsers_ understands `DOMContentLoaded`. If you deal with ancient browsers, you need `load`. – Zeta Apr 17 '14 at 05:49
0

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.

FantomX1
  • 1,023
  • 1
  • 10
  • 18
  • Almost everything about that statement was wrong and doesn't answer the question – Randy Hall May 14 '20 at 20:29
  • User doesn't necessarily wait, even though in some cases should. But let's regard it in the context. The functionality is not used terms that by document.write that it provides incomplete data the user to use step by step. Either way, there still has to be a check on the background, client-side js can't handle it. But for the generic scenario, for this question/usage what might be needed is waiting for the entire document/window to load, since seems like you don't have other option how to ensure eg Jquery is available when it's listed in the page footer and you somehow can't move it, afaik. – FantomX1 Aug 12 '20 at 20:56