3

window.onload from my reading sounds like it is loosely interchangeable with document.onload but my experience has shown this is incorrect. I've inherited a JS script and I'm not sure how to correct it. I want the JS to execute once the DOM has loaded, not once all resources have been loaded. How can I do this?

Currently I have:

window.onload = initDropMenu;

I've tried:

 document.onload = initDropMenu;

which just results in the menu not loading. I've also tried removing the line altogether from the JS and just having the DOM execute it via:

<body onload="initDropMenu()">

that also resulted in no menu, and in no errors in the console. My JS knowledge is limited, what am I missing here?

chris85
  • 23,255
  • 7
  • 28
  • 45
  • 1
    I've never heard of `document.onload`. But `` should work, it's equivalent to `window.onload`. – Barmar Mar 04 '18 at 06:45
  • 1
    `` results in no menu, and no error in the console. I also had never heard of `document.onload` but my reading lead me to believe it existed, https://stackoverflow.com/questions/588040/window-onload-vs-document-onload... or perhaps I misread that thread and its usage? – chris85 Mar 04 '18 at 06:47
  • try putting it before body closing tag `

    `

     – Ghassan Elias Mar 04 '18 at 06:52
  • 2
    Potentially use https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded – William Fleming Mar 04 '18 at 06:54
  • @Barmar The dup is the thread I had read, and commented about the results not working – chris85 Mar 04 '18 at 06:56
  • @chris85, you're definitely looking for [document.DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) – Kosh Mar 04 '18 at 06:58
  • @chris85 Sorry, didn't notice that that comment was from the questioner, you should have put those details in the question itself. – Barmar Mar 04 '18 at 06:59
  • None of the answers to that question say to use `document.onload`. – Barmar Mar 04 '18 at 07:01
  • 1
    @Barmar https://stackoverflow.com/a/588048/4333555 implies that `document.onload` can be used interchangeably with `window.onload`.. or by my reading of it. The comment from @williamflemming has lead me to a workable answer though. I dont know enough about JS though to say if the solution is/isnt efficient. I would have thought that creating my own event listener wouldnt be needed. My current solution is `document.addEventListener("DOMContentLoaded", function(event) {....`. – chris85 Mar 04 '18 at 07:07
  • 1
    I think that answer is confusing `document.onload` with `document.onDOMContentLoaded`. Notice that it doesn't have a link for `document.onload`, like it does for `window.onload`. – Barmar Mar 04 '18 at 07:09
  • 1
    @chris85 Nice job! That should be fine, that is what jQuery uses internally for their $().ready function. https://github.com/jquery/jquery/blob/master/src/core/ready.js#L79-L83 – William Fleming Mar 04 '18 at 07:31

1 Answers1

8

Load Event on window:

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, scripts, links and sub-frames have finished loading.
[source: developer.mozilla.org]

    <script>
       window.onload = function(){ init(); };
    </script>

Load Event on HTML Elements:

The load event is fired when a resource and its dependent resources have finished loading.
[source: developer.mozilla.org]

    <!-- When the image is loaded completely -->
    <img onload="image_loaded()" src="w3javascript.gif">

    <!-- When the frame is loaded completely (including all resources) -->
    <iframe onload="frame_loaded()" src="about.html">

    <!-- When body loaded completely (including all resources, images and iframes) -->
    <body onload="init()">

Many forums even some answers in this site may mislead you, but the load event on body element is not only just equivalent to load event on window, it is the exact same event. The following quote clarifies it.

For historical reasons, some attributes/properties on the <body> and <frameset> elements actually set event handlers on their parent Window object. (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)
[source: developer.mozilla.org]

The DOMContentLoaded Event:

What developers should use is DOMContentLoaded event on document. It fires when the html has loaded and parsed completely.

    document.addEventListener("DOMContentLoaded", function(event) {
        alert("Document is ready");
    });

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
[source: developer.mozilla.org]

Perhaps this is the only answer regarding this topic that has proper References

Munim Munna
  • 15,455
  • 6
  • 22
  • 52
  • Setting a function to `window.onload` only allows for one thing to happen when the window loads (whatever you define in that function), while addEventListener allows any number of things to fire that are subscribed to the load event. Is it possible there's other code that uses `window.onload=function()` that is defined *after* your your menu code, such that your menu code is being overwritten? It's quite common practice to use `window.onload` instead of event listeners: [jsBin example](https://jsbin.com/dowebek/edit?html,js,output) – thmsdnnr Mar 10 '18 at 16:07
  • Explanation is, there is nothing called `document.onload`. You have to use DOMContentLoaded event to achieve what you wre trying to do. Ask if you need any more clarifications. – Munim Munna Mar 10 '18 at 16:16
  • Body onload is the alias of window.onload. it is fired when all resources has loaded completely, domcontentloaded fires when only the html is loaded. – Munim Munna Mar 10 '18 at 16:33