Languages
[Edit]
EN

JavaScript - event fired when all web page is loaded

7 points
Created by:
AnnLen
9180

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>

 

Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join