是否有可能等到所有javascript文件都被加载后再执行javascript代码？

Question

我们有几个JavaScript文件,我们加载到母版页的底部.但是,我有一种情况,我需要在加载其他脚本之前执行一些JavaScript.是否可以等到加载所有JavaScript文件然后执行一些JavaScript代码？

我想$(document).ready()这样做了,但事实证明,事实并非如此.当然我们可以将脚本文件从底部移到顶部,但我想知道它是否可能是我想要的.

Answer 1

您可以使用

$(window).on('load', function() {
    // your code here
});

这将等到页面加载.$(document).ready()等到DOM加载

Answer 2

您可以.getScript()在加载后使用并运行代码:

 $.getScript("my_lovely_script.js", function(){

    alert("Script loaded and executed.");
    // here you can use anything you defined in the loaded script

 });

您可以在此处看到更好的解释:如何在另一个JavaScript文件中包含JavaScript文件？

Answer 3

你可以使用<script>'s defer属性.它指定在页面完成解析后执行脚本.

<script defer src="path/to/yourscript.js">

一篇很好的文章:http://davidwalsh.name/script-defer

浏览器支持似乎很不错:http://caniuse.com/#search=defer

Answer 4

稍微扩展一下@Eruant的答案，

$(window).on('load', function() {
    // your code here
});

在加载脚本时，async两者都可以很好地工作。defer

所以你可以像这样导入所有脚本：

<script src="/js/script1.js" async defer></script>
<script src="/js/script2.js" async defer></script>
<script src="/js/script3.js" async defer></script>

只需确保script1不调用script3之前的函数$(window).on('load' ...，并确保在window load事件内部调用它们。

有关 async/defer 的更多信息请参见此处。