HTML onload Event Attribute - Window Event Attributes

Definition and Usage

The onload attribute fires when an object has been loaded.

onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).

The onload attribute can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

The onload attribute can also be used to deal with cookies (see "More Examples" below).

Browser Support

Syntax

<element onload="script">

Attribute Values

Value	Description
script	The script to be run on onload

Technical Details

Supported HTML tags:	<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

Example of HTML onload Event Attribute

Here executes a JavaScript immediately after a page has been loaded.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

Output should be:

How to add a JavaScript immediately after a page has been loaded

See the code.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

Output should be:

How to use onload on an <img> element. Alert "Image is loaded" immediately after an image has been loaded

See the code.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<img src="https://horje.com/avatar.png" onload="loadImage()" width="100" height="132">

<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

</body>
</html>

Output should be:

How to use the onload event to deal with cookies (using "advanced" javascript)

Here is Cookies are enabled.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  let text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Output should be:

html event attributes

HTML onafterprint Event Attribute	Window Event Attributes
HTML onbeforeprint Event Attribute	Window Event Attributes
HTML onbeforeunload Event Attribute	Window Event Attributes
HTML onerror Event Attribute	Window Event Attributes
HTML onhashchange Event Attribute	Window Event Attributes
HTML onload Event Attribute	Window Event Attributes
HTML onoffline Event Attribute	Window Event Attributes
HTML ononline Event Attribute	Window Event Attributes
HTML onpageshow Event Attribute	Window Event Attributes
HTML onresize Event Attribute	Window Event Attributes
HTML onunload Event Attribute	Window Event Attributes

Single Articles

How to add a JavaScript immediately after a page has been loaded	Window Event Attributes
How to use onload on an <img> element. Alert "Image is loaded" immediately after an image has been loaded	Window Event Attributes
How to use the onload event to deal with cookies (using "advanced" javascript)	Window Event Attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	Window Event Attributes
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/ev_onload.asp