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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11258068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:10:16  来源:igfitidea点击:

Is it possible to wait until all javascript files are loaded before executing javascript code?

javascriptjquery

提问by Martijn

We have several JavaScript files which we load at the bottom of the master page. However, I have the situation that I need to perform some JavaScript before the other scripts are loaded. Is it possible to wait till all the JavaScript files are loaded and then execute some JavaScript code?

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

I thought $(document).ready()did this, but as it turns out, it doesn't. Of course we can move the script files from the bottom to the top, but I am wondering if it's possible what I want.

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

回答by Eruant

You can use

您可以使用

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

Which will wait until the page is loaded. $(document).ready()waits until the DOM is loaded

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

回答by Control Freak

You can use .getScript()and run your code after it loads:

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

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

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

 });

You can see a better explanation here: How do I include a JavaScript file in another JavaScript file?

您可以在这里看到更好的解释:如何在另一个 JavaScript 文件中包含一个 JavaScript 文件?

回答by Simone

You can use <script>'s deferattribute. It specifies that the script will be executed when the page has finished parsing.

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

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

A nice article about this: http://davidwalsh.name/script-defer

一篇关于这个的好文章:http: //davidwalsh.name/script-defer

Browser support seems pretty good: http://caniuse.com/#search=defer

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

回答by Alpha2k

Expanding a bit on @Eruant's answer,

扩展一下@Eruant的回答,

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

Works very well with both asyncand deferwhile loading on scripts.

作品非常好,既asyncdefer,而在脚本加载。

So you can import all scripts like this:

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

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

Just make sure script1doesn't call functions from script3before $(window).on('load' ..., make sure to call them inside window loadevent.

只要确保script1不要从script3before调用函数$(window).on('load' ...,确保在window loadevent 中调用它们。

More about async/defer here.

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