我们在母版页的底部加载了几个 JavaScript 文件。但是,在加载其他脚本之前,我需要执行一些 JavaScript。有没有可能等到所有的 JavaScript 文件都加载完毕后再执行一些 JavaScript 代码?
我以为是 $(document).ready()干的,但结果并非如此。当然,我们可以将脚本文件从底部移动到顶部,但我想知道这是否可能是我想要的。
$(document).ready()
You can use <script>'s defer attribute. It specifies that the script will be executed when the page has finished parsing.
<script>
defer
<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/
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 })
You can use .getScript() and run your code after it loads:
.getScript()
$.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?
Expanding a bit on @Eruant's answer,
Works very well with both async and defer while loading on scripts.
async
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.
script1
script3
$(window).on('load' ...
window load
More about async/defer here.
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 ); }); });