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. Show
 The Main Idea For Call A Js Function After Div LoadSuppose you have a div called my_area(id), now you want to call a javascript function after the my_area div load completely. 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 JavaScriptvar 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 Exampledocument.querySelector('#my_area').addEventListener('load', function(){
aTestFunction();
});
function aTestFunction(){
return "called";
}
The a "aTestFunction" will call after the my_area div loaded. The HTML DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user’s browser type and browser version, and load the version of the web page based on the information. The onload event can also be used for cookies. Syntax: In HTML: <element onload="scriptFile"> In JavaScript: object.onload = function(){scriptFile};In JavaScript, using the addEventListener() method: object.addEventListener("load", scriptFile);Example: Using the addEventListener() method HTML
object.onload = function(){scriptFile};0object.onload = function(){scriptFile};1 object.onload = function(){scriptFile};2object.onload = function(){scriptFile};3object.onload = function(){scriptFile};0object.onload = function(){scriptFile};5 object.onload = function(){scriptFile};6object.onload = function(){scriptFile};0object.onload = function(){scriptFile};8>
object.addEventListener("load", scriptFile);2 object.onload = function(){scriptFile};3object.onload = function(){scriptFile};0object.addEventListener("load", scriptFile);5object.addEventListener("load", scriptFile);6object.addEventListener("load", scriptFile);2>object.addEventListener("load", scriptFile);9
Output: Here, the getElementById() method will return the elements that have given an ID which is passed to the function. It can also be used to change the value of any particular element or get a particular element. The DOM innerHTML property will be used to set or return the HTML content of an element. HTML DOM onload Event We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article. Supported tags:
Supported Browsers: The browsers supported by HTML DOM onload Event are listed below:
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript. Where can I use onload?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.). However, it can be used on other elements as well (see "Supported HTML tags" below).
Which elements support onload?onload is an event specific to the body , frame , iframe , img , link , and script elements.
Is there an onload function in JavaScript?The onload in Javascript is responsible for loading objects within a web page, it occurs when the web page is loaded and needs the loading of other important elements. The onload in javascript is compatible with loading elements like CSS files, images, script files, etc. within a web page.
Is onload necessary?In HTML, the onload attribute is generally used with the <body> element to execute a script once the content (including CSS files, images, scripts, etc.) of the webpage is completely loaded. It is not necessary to use it only with <body> tag, as it can be used with other HTML elements.
|
