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

 });

您可以在此处看到更好的解释：How do I include a JavaScript file in another JavaScript file?

Answer 3

您可以使用<script>的{{1}}属性。它指定在页面完成解析时执行脚本。

defer

关于此的好文章：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事件内调用它们。

有关异步/延迟here的更多信息。

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

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

5 个答案: