Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - event fired when all web page is loaded

0 contributions
7 points

Quick solution:

// Events that wait for all resources

// 1.
window.addEventListener('load', function() { /* ... */ });
// 2.
//   <body onload="executeSomeLogic()"></body>
// 3.
document.body.onload = function() { /* ... */ };

// Events that do not wait for all resources

// 1.
window.addEventListener('DOMContentLoaded', function() { /* ... */ });
// 2.
document.addEventListener('DOMContentLoaded', function() { /* ... */ });

Note: read this article to know about load event order.

Below the events usage are presented in details.

1. Body load event examples

This event is called when body element is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).

1.1. onload attribute event

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body onload="onBodyLoad()">
  <p>Some text ...</p>
  <script>

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

  </script>
</body>
</html>

1.2. onload property event

This event is called when body element is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).

document.body property used in below example is not avaialbe until body element is created - access it from inside body element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <p>Some text ...</p>
  <script>

    document.body.onload = function() {
    	console.log('Body onload event called.');
    }

  </script>
</body>
</html>

2. Window load event example

This event is called when whole web page is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).

2.1. onload property event

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    window.onload = function() {
    	console.log('Window onload event called.');
    };

  </script>
</head>
<body>
  <p>Some text ...</p>
</body>
</html>

2.2. Event listener and load event

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

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

  </script>
</head>
<body>
  <p>Some text ...</p>
</body>
</html>

3. DOMContentLoaded event example

This event occurs when the DOM is ready without waiting to load for the stylesheets, images and subframes.

Note: this approach is not supported in Iinternet Explorer and Opera < 9.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <p>Some text ...</p>
  <script>

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

  </script>
</body>
</html>

 

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