Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

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

0 contributions
5 points

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:
1Documentreadystatechange
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)

1. Event 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="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" 
       onload="onImageLoaded()" />
  <iframe src="https://dirask.com/about" onload="onFrameLoaded()"></iframe>
  <p>Some text ...</p>
  <script>

    window.addEventListener('load', function() {
    	console.log('Window onload event called.');
    });
    
	window.addEventListener('DOMContentLoaded', function() {
    	console.log('Window DOMContentLoaded event called.');
    });
    
    document.addEventListener('DOMContentLoaded', function() {
    	console.log('Document DOMContentLoaded event called.');
    });

    document.addEventListener('readystatechange', function(e) {
		var message = 'Document readystatechange event called.';
		var state = 'readyState="' + document.readyState + '"';

		console.log(message + '  // ' + state);
    });

    function onBodyLoaded() {
    	console.log('Body onload event called.');
    };

    function onImageLoaded() {
    	console.log('Image onload event called.');
    }
    
    function onFrameLoaded() {
      	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

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more