为了加快页面加载时间,我想在页面内容加载完成后加载 JS 脚本。
我发现这篇有用的文章解释了当你有一个 JS 文件时如何做到这一点:https://varvy.com/pagespeed/defer-loading-javascript.html
解决方案是这样的:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "yourSingleJSFile.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
在我的例子中,我有 4 个不同的 js 文件:jQuery、main.js 和 index.js,它们以 $(document).ready(...);
开头并定义一个函数initMap() 和 maps.googleapis.com。因此我将代码更改为
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
document.body.appendChild(element);
var element = document.createElement("script");
element.src = "/resources/js/main.js";
document.body.appendChild(element);
var element = document.createElement("script");
element.src = "/resources/js/index.js";
document.body.appendChild(element);
var element = document.createElement("script");
element.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";
document.body.appendChild(element);
每次加载页面时,我都会在控制台中发现 JS 错误。到目前为止,我发现了两个错误:
首先
ReferenceError: $ is not defined index.js:9:5
我不明白这里发生了什么。似乎在加载 jquery 之前包含了 index.js。但是为什么在main.js中没有抛出错误呢?
第二
validValueError: initMap is not a function
在我看来,googleapis.com js 已经加载,但缺少 index.js(因为我在那里定义了函数 initMap())。
如何在页面内容加载后强制脚本依次加载?
最佳答案
如果脚本相互依赖,您需要确保首先加载依赖项。您可以像这样嵌套脚本加载:
var jqueryElement = document.createElement("script");
jqueryElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
var mainElement = document.createElement("script");
mainElement.src = "/resources/js/main.js";
var indexElement = document.createElement("script");
indexElement.src = "/resources/js/index.js";
var googleApiElement = document.createElement("script");
googleApiElement.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";
// add the first script element
document.body.appendChild(jqueryElement);
jqueryElementElement.onload = function () {
document.body.appendChild(googleApiElement);
}
googleApiElement.onload = function () {
document.body.appendChild(mainElement);
document.body.appendChild(indexElement)
}
我只是在猜测你的依赖顺序。
关于javascript - 页面加载后依次加载多个JS文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39831040/