加载页面后加载脚本?
是否有可能时,页面的其余部分加载到加载某些脚本像加载页面后加载脚本?
<script type="text/javascript" src="somescript.js"></script>
?
想象一下,我有几个像这样的大型脚本文件,当页面加载时不需要。例如。我使用的Google地图API仅在单击按钮时使用(所以不能在页面加载时使用)。
在我处理所有脚本标记之前,是否可以先加载页面的其余部分?
在jQuery中你的文档准备
$.getScript("somescript.js", function(){
alert("Script loaded and executed.");
});
我学到了一个有用的功能! – Miron 2017-07-28 07:20:02
是的,这是完全可能的。将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>
这是可能的。我在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.
}
这使用了一个回调函数,该函数将在加载脚本时运行。
地图确实:https://developers.google.com/loader/ – 2013-09-20 03:30:58
没有人提到这些?
$(window).load(function(){
// do something
});
或
$(window).bind("load", function() {
// do something
});
$(document).ready(function() {
var ss = document.createElement("script");
ss.src = "somescript.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});
欢迎来到SO :)最好向您发布的代码添加一个解释作为答案,以便它可以帮助访问者理解为什么这是一个很好的答案。 – abarisone 2016-07-05 05:49:56
要只是允许页面显示加载脚本之前,使用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>
若他们列在头部,但如果您使用类似yepnope {http://yepnopejs.com/}的内容,则只有在需要时才能加载它们。 – idbentley 2011-03-30 19:10:34