是否可以等到所有 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
Is it possible to wait until all javascript files are loaded before executing javascript code?
提问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 defer
attribute. 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 async
and defer
while loading on scripts.
作品非常好,既async
和defer
,而在脚本加载。
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 script1
doesn't call functions from script3
before $(window).on('load' ...
, make sure to call them inside window load
event.
只要确保script1
不要从script3
before调用函数$(window).on('load' ...
,确保在window load
event 中调用它们。
More about async/defer here.
更多关于异步/延迟在这里。