是否可以加载特定的脚本,例如
<script type="text/javascript" src="somescript.js"></script>
当页面的其余部分加载完成后再加载脚本吗?
假设我有一些较大的脚本文件,在页面加载时不需要它们。例如,我使用的是Google Maps API,仅在单击按钮时使用(因此不会在页面加载时使用)。
是否可能先加载页面的其余部分,然后再处理头部中的所有这些脚本标签?
是否可以加载特定的脚本,例如
<script type="text/javascript" src="somescript.js"></script>
当页面的其余部分加载完成后再加载脚本吗?
假设我有一些较大的脚本文件,在页面加载时不需要它们。例如,我使用的是Google Maps API,仅在单击按钮时使用(因此不会在页面加载时使用)。
是否可能先加载页面的其余部分,然后再处理头部中的所有这些脚本标签?
在jQuery中,你可以在文档准备好后使用这个方法
$.getScript("somescript.js", function(){
alert("Script loaded and executed.");
});
async
参数指定脚本在准备就绪时执行,而不管页面加载到哪个程度。defer
可能是你要找的。 - Alexander Holsgrove这是可能的。我在一个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.
}
这里使用了一个回调函数,当脚本加载完成后它将被执行。
$(document).ready(function() {
var ss = document.createElement("script");
ss.src = "somescript.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});
$(window).load(function(){
// do something
});
或者
$(window).bind("load", function() {
// do something
});
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);
}
如果想在脚本加载前允许页面显示,请使用 async
属性:
<script src="//url/to/script.js" async></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = '//url/to/script.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
没错,这是完全可能的。在你的 <body>
标签中添加一个 onLoad="foo();"
事件,并调用你的脚本。你需要将外部 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>