javascript - How do you determine the firing order of load and DOMContentLoaded events? -


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

, "4" should fire before 5 ". It is not what is shown according to the order of the alert. However, if I change the body and IMG onload handlers to execute document.write instead of warning , then 5 will be displayed, which corresponds to that answer.

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Script & gt; Document.addEventListener ("DOMContentLoaded", function () {warning ("1");}); Document.addEventListener ("load", function () {warning ("2");}); Window.addEventListener ("load", function () {warning ("3");}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body onload = "alert ('4')" & gt; & Lt; H1 & gt; Hello World! & Lt; / H1> & Lt; Img onload = "warning ('5')" src = "https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt = "smiley face" width = "42 "Height =" 42 "/> & Lt; / Body & gt; & Lt; / Html & gt;    

After loading all the images, the window / body onload gets burnt.

to

At the end of the document loading process fire the event load. At this point, all the objects in the document are in DOM, and all images, scripts, links and sub-frames have been loaded.

The image load should be removed after the window is loaded.

And the order to trigger the events of the window / body occurs when you register event listeners

   & Lt; Img onload = "console.log ('img onload')" src = "https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt = "smiley faces" width = "42" height = "42" /> & Lt; Script & gt; 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");}); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  
  • "
  • " body load "
  • " body Onload "
  • " END - Window Load "

    and not all browsers support document. Load.

  • Comments

    Popular posts from this blog

    java - ImportError: No module named py4j.java_gateway -

    python - Receiving "KeyError" after decoding json result from url -

    .net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -