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 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 and not all browsers support document. Load. 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;
& 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;
Comments
Post a Comment