Call JavaScript Function After Page Load Complete
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of call JavaScript function after page load complete, here we using onreadystatechange property for defines a function to be executed when the readyState changes after that we checking document state then only we can call javascript function.
We checking document whether loaded or not if it’s loaded then we initialize myfun() function call otherwise we generating load event to load page successfully.
Step By Step Guide On Call JavaScript Function After Page Load Complete :-
Here we defined div tag with id ‘res’ for display result message on webpage then in script we executing function by onreadystatechange property.
In function we checking document state by readyState event which returns document state so here we used to check document is state whether completed or not.
If document state is completed then it initialized myfun() function call otherwise we loading window by onload event then initializing myfun() function.
In myfun() method we inserted text on ‘res’ div tag by innerHTML.
<!doctype html>
<html>
<head>
<title>CALL FUNCTION AFTER PAGE LOAD</title>
</head>
<body>
<div id="res"></div>
<script>
document.onreadystatechange=function(){
if(document.readyState==="complete"){
myfun();
}
else{
window.onload=function(){
myfun();
}
}
}
function myfun(){
document.getElementById('res').innerHTML="Page is Loaded Successfully!!!";
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined div element with ‘res’ id for append message on webpage and in script we executing function by onreadystatechange property.
- Then using if() condition we checks whether document state is complete or not. If condition true means page successfully loaded otherwise it state failed.
- If document state match with complete then we initialized myfun() function will loaded otherwise using ‘onload’ event appending on window it loads page successfully.
- Then we initialized myfun() will starts it loading there we collecting div tag ‘res’ then appending ‘Page is Loaded Successfully!!!’ message on webpage by innerHTML for user verification.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to call function after page load using javascript.
When we executing this program on browser we can see success message of ‘Page is Loaded Successfully!!!’ on webpage because our document loaded successfully otherwise it tries to load document first then only it reach’s success message.
We can also do some other activities on ‘myfun()’ instead of displaying message and if you’re think to modifies displayed message you can do it won’t affects result.
I hope this tutorial on call JavaScript function after page load complete helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
