Languages
[Edit]
EN

JavaScript - load events order for window, document, dom, body and elements

5 points
Created by:
Root-ssh
177650

In this quick article, we are going to discuss about order of load events.

Kowledge about order helps to execute some logic when DOM is ready, before resources are loaded or after all resources (scripts, styles, images, videos, audio, frames) are loaded. readystatechange,with readyState="complete", body onload and window onload are designed to work with synchronous loading - it means if some file is loaded asynchronously it will be not signaled in event.

 

By default load/change events should be executed in following order:

 

Element

(or Object)

Event nameOccurs when:
1Document

readystatechange

with readyState === "interactive"

DOM is parsed but resources are not loaded yet.
2DocumentDOMContentLoadedDOM is parsed but resources are not loaded yet.
3WindowDOMContentLoadedDOM is parsed but resources are not loaded yet.
4Document

readystatechange

with readyState === "complete"

DOM is parsed and resources are loaded.
5ImageonloadImage resource is loaded.
6FrameonloadFrame resource is loaded.
7Bodyonload

DOM is parsed and resources are loaded.

(can be handled after window onload - read example notes)

8Windowonload

DOM is parsed and resources are loaded.

(can be handled before body onload - read example notes)

 

Events comparision example

Note: load events for window and body can be executed in different order - depending of in what order they were added.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
         
    img { width: 200px; height: 200px; }
    iframe { border: none; width: 400px; height: 200px; }
    
  </style>
</head>
<body onload="onBodyLoaded()">

  <img src="/static/bucket/1574890428058-BZOQxN2D3p--image.png" onload="onImageLoaded()" />
  <iframe src="https://dirask.com/about" onload="onFrameLoaded()"></iframe>
  <p>Some text ...</p>

  <script>

    // ------------------------------------------------------------------
    // window load events
    
    window.addEventListener('load', function() {                 //   8   - Window onload
    	console.log('Window onload event called.');
    });
    
	window.addEventListener('DOMContentLoaded', function() {     //   3   - Window DOMContentLoaded
    	console.log('Window DOMContentLoaded event called.');
    });
    
    // ------------------------------------------------------------------
    // document load events
    
    document.addEventListener('DOMContentLoaded', function() {   //   2   - Document DOMContentLoaded
    	console.log('Document DOMContentLoaded event called.');
    });

    document.addEventListener('readystatechange', function(e) {  // 1 & 4 - Document readystatechange
		var state = document.readyState;
        console.log('Document readystatechange event called (readyState === "' + state + '").');
    });

    // ------------------------------------------------------------------
    // body load event
    
    function onBodyLoaded() {                                    //   7   - Body onload
    	console.log('Body onload event called.');
    };

    // ------------------------------------------------------------------
    // image load event
    
    function onImageLoaded() {                                   //   5   - Image onload
    	console.log('Image onload event called.');
    }
    
    // ------------------------------------------------------------------
    // iframe load event
    
    function onFrameLoaded() {                                   //   6   - Frame onload
      	console.log('Frame onload event called.');
    }
    
    // ------------------------------------------------------------------
    
    console.log('Script source code (readyState === "' + document.readyState + '").');
   
  </script>
</body>
</html>

Used resources:

Image used in onload event order test - JavaScript
Image used in onload event order test - JavaScript

 

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join