javascript - 是否可以等到所有 javascript 文件都加载完毕后再执行 javascript 代码？

Question

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

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

Answer 1

您可以使用

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

它将等到页面加载完毕。$(document).ready()等到 DOM 加载完毕。

在普通的 JS 中：

window.addEventListener('load', function() {
    // your code here
})

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>'defer属性。它指定脚本将在页面完成解析后执行。

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

关于此的一篇不错的文章：http: //davidwalsh.name/script-defer

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

关于使用延迟和异步加载 JS 的另一篇精彩文章：https ://flaviocopes.com/javascript-async-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事件中调用它们。

更多关于异步/延迟在这里。

Answer 5

那对我有用：

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 );
    });
});