onload Event

Javascript/Jquery onload event

javascript/jquery_onload_event

The onload event occurs 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.).

Execute a JavaScript immediately after a page has been loaded:

<body onload="OnloadFunction()">

Examples:

In HTML:

<element onload="myScript">
<iframe onload="myFunction()" src="/default.asp"></iframe>

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

In JavaScript:

object.onload = function(){myScript};
<iframe id="myFrame" src="/default.asp"></iframe>

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

<script>
document.getElementById("myFrame").onload = function() {myFunction()};

function myFunction() {
  document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

In JavaScript, using the addEventListener() method:

object.addEventListener("load", myScript);
<iframe id="myFrame" src="/default.asp"></iframe>

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

<script>
document.getElementById("myFrame").addEventListener("load", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

JQuery:

$( document ).ready()

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Shorthand for $( document ).ready()

$(function() {
    console.log( "ready!" );
});

You can also pass a named function to $( document ).ready() instead of passing an anonymous function.

Passing a named function instead of an anonymous function.

function readyFn( jQuery ) {
    // Code to run when the document is ready.
}
 
$( document ).ready( readyFn );
// or:
$( window ).on( "load", readyFn );


This article is contributed by Arrrsh. If you like dEexams.com and would like to contribute, you can also write your article here or mail your article to admin@deexams.com . See your article appearing on the dEexams.com main page and help others to learn.


Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.


Python if , elif and else

Python Conditions and If statements

  • 0
Python for beginners

Learning Python Part 1

  • 3
Struct Alignment and Padding

Struct Alignment and Padding in C++ And C

  • 0
Friend function

Friend function C++

  • 0
Pointers

C++ Pointers

  • 0
Structures

C++ Structures

  • 0
Types of Inheritance in C++

Inheritance and access specifiers C++

  • 0
Java date pattern

Java Date Pattern Syntax

  • 0
Java Date and Calendar

Java Date formats

  • 0
JAVA Data Type

Data types in Java

  • 0
Java unreachable code

Unreachable Code Error in Java

  • 0

Post Comment

Comments(0)

WEB TECHNOLOGY

Articles

×

Forgot Password

Please enter your email address below and we will send you information to change your password.