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

【问题标题】：Is it possible to wait until all javascript files are loaded before executing javascript code?是否可以等到所有 javascript 文件都加载完毕后再执行 javascript 代码？
【发布时间】：2012-06-30 18:22:35
【问题描述】：

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

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

【问题讨论】：

您可以在编写自己的脚本后使用script 加载程序来执行此操作。
我不认为你想要什么很清楚 - 你同时谈到既想在加载其他脚本之前执行 X，又想等到所有脚本被加载。它是哪一个？您希望执行的 X 的性质是什么？
@Damien_The_Unbeliever TGo 更清楚一点：我想在加载所有 javascript 文件后执行 javascript。

标签： javascript jquery

【解决方案1】：

你可以使用

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

等待页面加载。 $(document).ready() 等待 DOM 加载完毕。

在纯 JS 中：

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

【讨论】：

这里有更好的解释4loc.wordpress.com/2009/04/28/documentready-vs-windowload
非常适合我的应用程序，它需要等到动态加载的脚本完成加载后再生成页面内容。 +1
普通的旧 JavaScript 等价物是：window.addEventListener('load', function() { /* your code here */ })。
这是追加执行栈还是替换旧栈？

【解决方案2】：

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

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

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

 });

你可以在这里看到更好的解释：How do I include a JavaScript file in another JavaScript file?

【讨论】：

如果我想要标准的 javascript 函数，而不是 jquery。代码怎么样？
注意这个不会缓存文件，每次都会下载。文档参考了 $.ajaxSetup 或 $.ajax 来启用缓存。

【解决方案3】：

您可以使用<script> 的defer 属性。它指定当页面完成解析时将执行脚本。

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

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

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

另一篇关于使用 defer 和 async 加载 JS 的精彩文章：https://flaviocopes.com/javascript-async-defer/

【讨论】：

它似乎并没有等待所有其他 JS 文件执行完毕，至少在 Firefox 中没有。
就像文档说的那样，延迟脚本在页面被解析时加载（而不是在加载 js/css 时）。这不是解决方案。

【解决方案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 不会在$(window).on('load' ... 之前从script3 调用函数，请确保在window load 事件中调用它们。

更多关于异步/延迟here。

【讨论】：

【解决方案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 );
    });
});

【讨论】：