在执行JavaScript代码之前等待所有JavaScript文件加载完成，这是否有可能？

Question

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

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

- Martijn

---

你可以在自己的脚本之后使用“脚本加载器”来完成它。 - Jared Farrish

我认为你想要什么并不清楚 - 你同时谈到了想在其他脚本加载之前执行X，但又想等到所有脚本都加载完。那到底是哪一个？而你想执行的X具体是什么？ - Damien_The_Unbeliever

@Damien_The_Unbeliever 为了更清晰明确：我想在所有 JavaScript 文件加载完成后执行 JavaScript。 - Martijn

Answer 1

你可以使用

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

这将等待页面加载完成。 $(document).ready() 将等待 DOM 加载完成。

用普通的 JS 写法：

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

- Eruant

---

这里有一个更好的解释：http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ - Eruant

我的应用程序需要等待动态加载的脚本完成加载后才能生成页面内容，这个工具很好用。+1 - Yogi

纯粹的 JavaScript 等效代码是：window.addEventListener('load', function() { /* 在这里编写你的代码 */ })。 - Dave Land

这会附加执行堆栈还是替换旧的？ - Amit Shah

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文件？

- Control Freak

---

如果我想要标准的 JavaScript 函数而非 jQuery，代码应该怎么写？ - Josua Marcel C

请注意，这不会缓存文件，它会每次都下载。文档中提到了$.ajaxSetup 或 $.ajax来启用缓存。 - JanErikGunnar

如果我正在加载jQuery呢？ - frumbert

Answer 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/

- Simone

---

它似乎不等待所有其他JS文件执行完成，至少在Firefox中不是这样。 - Rolf

根据文档所说，在页面解析时推迟脚本加载（而不是在js/css加载时）。但这不是一个解决方案。 - Nishant

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在$(window).on('load' ...)之前不要调用script3中的函数，确保在window load事件内调用它们。

有关异步/延迟加载，请点击此处。

- Alpha2k

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

- Eduardo Pereira