JavaScript - Execute JS codes after DOM or Page load

 

In the most cases, some CSS/JavaScript/jQuery codes require only "DOM" to be completely loaded in order to work properly!

Document Object Model (DOM) load:

   - When HTML document has been completely loaded and parsed
   - Does not include stylesheets, images, and subframes loads!

Page load:

 - When HTML document has been completely loaded and parsed
 - Includes stylesheets, images, and subframes loads!

 From all the alternatives demonstrated below,  "JQuery" is the recommended one because it allows multiple onload calls!

DOM onload - with anonymous functions (jQuery)
Execute anonymous Functions after Document Object Model (DOM) is fully loaded! <p> P _________________________________________________________________________ </p> <!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p> P0 _________________________________________________________________________ </p> <script> /* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */ $(function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ }); </script> <p> P1 _________________________________________________________________________ </p> <script> /* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */ $(function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ }); </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3") </script> <!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when DOM is fully loaded --> <p> P3 _________________________________________________________________________ </p>

DOM onload - with named functions (jQuery)
Execute named Functions after Document Object Model (DOM) is fully loaded! <p> P _________________________________________________________________________ </p> <!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p> P0 _________________________________________________________________________ </p> <!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <!-- Instruct jQuery to execute "Test1" function after DOM is fully loaded --> <script> $(Test1); </script> <p> P2 _________________________________________________________________________ </p> <!-- Instruct jQuery to execute "Test2" function after DOM is fully loaded --> <script> $(Test2); </script> <p> P3 _________________________________________________________________________ </p> <script> alert("3") </script> <!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when DOM is fully loaded -->

window onload - with anonymous functions (JavaScript)
<script> window.onload = function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ /* (Limitation) This anonymous function will not be executed after page load, because there is another "window.onload" below */ } </script> <p> P1 _________________________________________________________________________ </p> <script> window.onload = function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ /* (Limitation) Only this anonymous function will be executed after page load */ } </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) --> <p> P3 _________________________________________________________________________ </p>

window onload - with named functions (JavaScript)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <script> window.onload = Test1; </script> <!-- (Limitation) This function will not be executed after page load, because there is another "window.onload" below --> <p> P2 _________________________________________________________________________ </p> <script> window.onload = Test2; </script> <!-- (Limitation) Only this function will be executed after page load --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) -->

body onload - with named functions (Html)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <body onload="Test1()"> <!-- (Limitation) Only this function will be executed after page load --> <p> P2 _________________________________________________________________________ </p> <body onload="Test2()"> <!-- (Limitation) This function will not be executed after page load, because there is already a "body onload" above --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 1" ("alert 2" will not be executed) -->

document onload - with anonymous functions (JavaScript)
<script> document.onload = function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } /* Tested on FireFox, Chrome, IE, Opera but did not work */ </script> <p> P1 _________________________________________________________________________ </p> <script> document.onload = function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } /* Tested on FireFox, Chrome, IE, Opera but did not work */ </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work --> <p> P3 _________________________________________________________________________ </p>

document onload - with named functions (JavaScript)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <script> document.onload = Test1; </script> <!-- Tested on FireFox, Chrome, IE, Opera but did not work --> <p> P2 _________________________________________________________________________ </p> <script> document.onload = Test2; </script> <!-- Tested on FireFox, Chrome, IE, Opera but did not work --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work -->


Keywords:
JavaScript - Execute JS codes after DOM or Page load