Is it possible to wait until all javascript files are loaded before executing javascript code

Question

We have several JavaScript files which we load at the bottom of the master page  However  I have the situation that I need to perform some JavaScript before the other scripts are loaded  Is it possible to wait till all the JavaScript files are loaded and then execute some JavaScript code   I thought   document  ready   did this  but as it turns out  it doesn t  Of course we can move the script files from the bottom to the top  but I am wondering if it s possible what I want

User · Answer

You can use  lt script gt  s defer attribute  It specifies that the script will be executed when the page has finished parsing   lt script defer src  quot path to yourscript js quot  gt   A nice article about this  http   davidwalsh name script-defer Browser support seems pretty good  http   caniuse com  search defer Another great article about loading JS using defer and async  https   flaviocopes com javascript-async-defer

User · Answer

You can use  getScript   and run your code after it loads      getScript  my lovely script js   function         alert  Script loaded and executed            here you can use anything you defined in the loaded script         You can see a better explanation here  How do I include a JavaScript file in another JavaScript file

User · Answer

You can use   window  on  load   function            your code here      Which will wait until the page is loaded    document  ready   waits until the DOM is loaded  In plain JS  window addEventListener  load   function            your code here

User · Answer

Expanding a bit on  Eruant s answer     window  on  load   function            your code here       Works very well with both async and defer while loading on scripts   So you can import all scripts like this    lt script src   js script1 js  async defer gt  lt  script gt   lt script src   js script2 js  async defer gt  lt  script gt   lt script src   js script3 js  async defer gt  lt  script gt    Just make sure script1 doesn t call functions from script3 before   window  on  load       make sure to call them inside window load event   More about async defer here

User · Answer

Thats work for me  var jsScripts        jsScripts push  quot  js script1 js quot     jsScripts push  quot  js script2 js quot     jsScripts push  quot  js script3 js quot        jsScripts  each function  index  value           holdReady  true          getScript  value   done function script  status            console log  Loaded     index           value          status                                   holdReady  false

[javascript] Is it possible to wait until all javascript files are loaded before executing javascript code?

Examples related to javascript

Examples related to jquery