Javascript 页面加载后加载脚本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5490996/
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
Load scripts after page has loaded?
提问by matt
Is it possible to load certain scripts like
是否可以加载某些脚本，例如
<script type="text/javascript" src="somescript.js"></script>
when the rest of the page has loaded?
页面的其余部分何时加载？
Imagine I have a few larger script files like this that are not needed when the page is loaded. E.g. I'm using the Google Maps API that is only used when a button is clicked (so not on page load).
想象一下，我有一些较大的脚本文件，这些文件在页面加载时不需要。例如，我使用的 Google Maps API 仅在单击按钮时使用（因此不在页面加载时使用）。
Is it possible to load the rest of the page first, before processing all those script tags in my head?
在我脑海中处理所有这些脚本标签之前，是否可以先加载页面的其余部分？
回答by slandau
回答by smfoote
It is possible. I was doing a similar thing in an AJAX intensive site, but I was loading the Google Charts API. Here is the code I used to load the Google Charts API when a button was clicked on the page.
有可能的。我在一个 AJAX 密集型网站上做了类似的事情，但我正在加载 Google Charts API。这是我用来在页面上单击按钮时加载 Google Charts API 的代码。
function loadGoogleChartsAPI() {
var script = document.createElement("script");
// This script has a callback function that will run when the script has
// finished loading.
script.src = "http://www.google.com/jsapi?callback=loadGraphs";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function loadGraphs() {
// Add callback function here.
}
This uses a callback function that will run when the script has loaded.
这使用将在脚本加载时运行的回调函数。
回答by nikoss
回答by laike9m
No one mentioned these?
没人提到这些吗？
$(window).load(function(){
// do something
});
or
或者
$(window).bind("load", function() {
// do something
});
回答by Dan Linh
$(document).ready(function() {
var ss = document.createElement("script");
ss.src = "somescript.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});
回答by danijar
To just allow the page to show before your script is loaded, use the asyncattribute:
要在加载脚本之前只显示页面，请使用以下async属性：
<script src="//url/to/script.js" async></script>
To hide the loading spinner in the browser, append the script tag after the page finished loading:
要在浏览器中隐藏加载微调器，请在页面加载完成后附加脚本标记：
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = '//url/to/script.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
回答by Andrej
Please see my code. The onload event will occur when the script has finished loading. Or the onerror event will occur.
请看我的代码。当脚本完成加载时将发生 onload 事件。否则会发生 onerror 事件。
function loadJavaScript() {
var script = document.createElement("script");
script.src = "javaScript.js";
script.type = "text/javascript";
script.onload = function () {
console.log('script was loaded successfully');
}
script.onerror = function (e) {
console.error('script.onerror');
}
document.getElementsByTagName("head")[0].appendChild(script);
}
Thanks to answer.
感谢回答。
Also see my codeof the load of the script.
回答by Flavio Oliveira
use the getScript method of jquery! or try simply to put this script on the end of the page?
使用jquery的getScript方法！或者尝试简单地将此脚本放在页面的末尾？
回答by Atanas Korchev
Yes, this is possible by dynamically injecting the JavaScript files from code. There are lots of libraries which you can use:RequireJS, HeadJSetc. Recently I found thisdocument which compares lots of JavaScript loader libraries.
是的，这可以通过从代码动态注入 JavaScript 文件来实现。有很多库可以使用：RequireJS、HeadJS等。最近我发现这个文档比较了很多 JavaScript 加载器库。
回答by Winfield Trail
Yep, that's completely possible. Add an onLoad="foo();"event to your <body>tag and have it invoke your scripts. You'll need to wrap your external JS in a function and do something like:
是的，这完全有可能。将onLoad="foo();"事件添加到您的<body>标记并让它调用您的脚本。您需要将外部 JS 包装在一个函数中并执行以下操作：
//EXTERNAL JS (jsstuff.js)
function Mojo() {
document.getElementById('snacks').style.visibility = "visible";
alert("we are victorious!");
}
//YOUR HTML
<html>
<head>
<script type='text/javascript'></script>
</head>
<body onLoad='Mojo();'>
<div id='snacks'>
<img src='bigdarnimage.png'>
</div>
</body>
</html>
