Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Execute a script when the element is finished loading in HTML?
In this article we are going to learn about execute a script when the element is finished loading in HTML.
When an object is loaded, the onload event takes place. Onload is most frequently used in the <body> element to run a script after a web page has loaded all of its content completely. This can be utilised for a number of things, such as checking for cookies or setting the appropriate version of the page based on the user's browser.
Let’s dive into the article to understand more about executing a script when the element is finished loading in HTML.
Using Onload Method
After the element has finished loading, the onload event takes place. To execute a script after the webpage has fully loaded, use this together with the body element.
Syntax
Following is the syntax for onload method.
<body onload="functionToBeExecuted">
Example
In the following example we are using onload method.
<!DOCTYPE html>
<html>
<body onload="loadFunction()">
<h1>Welcome To TutorialsPoint</h1>
<script>
function loadFunction() {
alert("Loaded Successfully");
}
</script>
</body>
</html>
When the script gets executed, the event gets triggered and displays an alert "loaded successfully" on the webpage.
If a user clicks on "OK", the page gets loaded successfully and displays the text "welcome to tutorialspoint".
Using window.onload Method
The window element's onload property is used to execute a script once the webpage has fully loaded. Once the webpage has loaded, the function is activated by the onload property.
Syntax
Following is the syntax for window.onload method
window.onload = function exampleFunction() {
// Function to be executed
}
Example
Consider the following example we are using window.onload method.
<!DOCTYPE html>
<html>
<body>
<h1>The Best E-Way Learning.</h1>
<script>
function loadFunction() {
alert("Window Loaded Successfully");
}
window.onload = loadFunction();
</script>
</body>
</html>
On running the above script, the output window pops up, displaying the alert "windows loaded successfully" when the event gets triggered on the webpage.
When the users click OK, the window gets loaded successfully and displays the text "the best e-way learning" on the webpage.
1K+ Views
