Call JavaScript Function After DIV Load
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of call JavaScript function after div load, here we using setInterval() and clearInterval() methods.
As we know setInterval() method used to call a function or executes a block of code repeatedly after particular interval each time and for stopping that repeated process we need to use clearInterval() method because it will clears that setInterval.
By using all these we checking whether div is successfully loaded or not then executes function.
Step By Step Guide On Call JavaScript Function After DIV Load :-
Here we defined div tag with id ‘ele’ for checks div condition then in script using setInterval() method we initializing function ‘check()’ with interval 300ms so it will loads this function for each 300ms.
In check() method using if() condition we initiliazed chobj() method with ‘div’ element as parameter.
In chobj() method we checks whether div element ‘ele’ loaded or not then it return Boolean values.
If it returns ‘true’ then alert message ‘true’ will displayed and interval cleared otherwise on webpage message ‘false’ will written for each 300ms.
<!doctype html>
<html>
<head>
<title>CALL FUNCTION AFTER DIV LOAD</title>
</head>
<body>
<div id="ele"></div>
<script>
var int=setInterval('check()',300);
function check(){
if(chobj('div')==true){
window.alert('true');
int=window.clearInterval(int);
}
else{
document.write('<p>false</p>');
}
}
function chobj(ele){
return (document.getElementById('ele'))?true:false;
}
</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 ‘ele’ id for checks div element condition whether loaded or not. In script we declared setInterval method with parameters of ‘check() method, 300-integer’.
- The setInterval() method refers parameter of check() method will executed repeatedly after each 300ms then stored on variable ‘int’.
- In check() method using if condition we called chobj(‘div’) initialized function then in method we checking div ‘ele’ whether present or not and returns respective boolean value to method check().
- If it returns ‘true’ to method ‘check()’ it executes alert method to display message ‘true’ to the user and clears interval so it’s not gets repeated after 300ms, otherwise message ‘false’ will be written on webpage repeatedly after 300ms infinitely.
- 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 div load using JavaScript.
When we executing this program on browser we can see success message of ‘true’ on webpage alert box for user verifications.
If we mistakenly defined div’s id value as some other string or we not defined ‘id’ attribute on div tag then else condition of ‘false’ message will written on webpage after 300ms infinite times so be aware to define anything.
We can also check div loading condition by some other process.
I hope this tutorial on call JavaScript function after div load helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
