How to Call JavaScript function after div load with source code

Last Updated : 30/06/2021

Sometimes you need to call javascript function after div load, or we need to execute a function after the div load. In this post, I will provide you the technique to solve how to call a javascript function after div load.

The Main Idea For Call A Js Function After Div Load

Suppose you have a div called my_area(id), now you want to call a javascript function after the my_area div load completely.
Now think logically if your div(my_area) is loaded then it must have a width and if it is not loaded then it has no width.
So check the width of your div and if you found that it has div then call your function.
Also, you need to check the width until your fund width is greater than zero because you do not know when it will load and if you found that means your div's width is greater than zero then stop checking and call your function.

HTML code of "call javascript function after div load"

<div id="my_area">
	call a javascript function after load this div
	ID of this div is my_area
</div>

"Call Javascript Function After Div Load" Raw JavaScript

var checkDiv = setInterval(function(){

var my_div_width = $("#my_area").width(); // find width

if( my_div_width > 0) { 
	clearInterval(checkDiv);
	 	aTestFunction();
	}
}, 10); // check after 10ms every time

function aTestFunction(){
	return "called";
}

Note: Using setInterval you can chack your div's width continuously after every 10ms, using clearInterval you can stop checking.

"Call Javascript Function After Div Load" Jquery Example

document.querySelector('#my_area').addEventListener('load', function(){
  aTestFunction();
});

function aTestFunction(){
	return "called";
}

The a "aTestFunction" will call after the my_area div loaded.