3

Why does the below code (JS Bin) fire in the order 1, 5, 3, 4? And why does 2 not fire at all?

According to the answer to this question, "4" should fire before "5". That's not what is shown by the order of the alerts. However, if I change the body and img onload handlers to execute document.write instead of alert, then 5 will be displayed, which is consistent with that answer.

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          alert("1");
        });
        document.addEventListener("load", function() {
          alert("2");
        });
        window.addEventListener("load", function() {
          alert("3");
        });
      </script>
    </head>
    <body onload="alert('4')">
        <h1>Hello World!</h1>
        <img onload="alert('5')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />
    </body>
</html>
Community
  • 1
  • 1
Zack Gao
  • 568
  • 1
  • 4
  • 14

1 Answers1

4

window/body onload fires after all the images are loaded.

From MDN window.onload

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.

So window load should come after the image load is fired.

And order of window/body events being triggeed depends on when you register the event listeners 

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("Head - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("head - document load");
        });
        window.addEventListener("load", function() {
          console.log("head - window load");
        });
      </script>
    </head>
    <body onload="console.log('BODY ONLOAD')">
        <h1>Hello World!</h1>
        <img onload="console.log('IMG ONLOAD')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />

      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("END - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("END - document load");
        });
        window.addEventListener("load", function() {
          console.log("END - window load");
        });
      </script>      
    </body>
</html>

would result in

  • "Head - DOMContentLoaded"
  • "END - DOMContentLoaded"
  • "IMG ONLOAD"
  • "head - window load"
  • "BODY ONLOAD"
  • "END - window load"

JSBin

And not all browsers support document.load.

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • Hi Eric, thanks for the thorough example. I understand the logic here, but the thing that still puzzles me is if I change the console.log or alert to document.write, then order of execution appears to change. Is this because if I stick a document.write into the img onload handler, then that will rewrite the document and destroy all the other handlers? – Zack Gao Oct 10 '14 at 17:53
  • alert is a "blocking" event which will block the execution thread which will change how things behave. That is why people recommend not using alert to debug. – epascarello Oct 10 '14 at 19:25