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.
This question is related to
javascript
jquery
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:
<script src="/js/script1.js" async defer></script>
<script src="/js/script2.js" async defer></script>
<script src="/js/script3.js" async defer></script>
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.
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?
Thats work for me:
var jsScripts = [];
jsScripts.push("/js/script1.js" );
jsScripts.push("/js/script2.js" );
jsScripts.push("/js/script3.js" );
$(jsScripts).each(function( index, value ) {
$.holdReady( true );
$.getScript( value ).done(function(script, status) {
console.log('Loaded ' + index + ' : ' + value + ' (' + status + ')');
$.holdReady( false );
});
});
You can use <script>
's defer
attribute. It specifies that the script will be executed when the page has finished parsing.
<script defer src="path/to/yourscript.js">
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/
Source: Stackoverflow.com