为了加快页面加载速度,我希望在页面内容加载完毕后再加载JS脚本。
我找到了一篇很有用的文章,它解释了如何在只有一个JS文件时实现这一点:https://varvy.com/pagespeed/defer-loading-javascript.html 解决方案如下:
在我的情况下,我有4个不同的js文件:jQuery、main.js和index.js。这些文件都以
每次加载页面时,我在控制台中发现一个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错误。到目前为止,我发现了两个错误: 第一个错误
我不明白这里发生了什么。似乎在加载jquery之前就已经包含了index.js。但是为什么没有在main.js中抛出错误呢? 第二个错误ReferenceError:$未定义 index.js:9:5
对我来说,googleapis.com js已经加载,但缺少index.js(因为我在那里定义了函数initMap())。validValueError:initMap不是函数
如何在页面内容加载后强制按顺序加载脚本?
jQuery
? - Rayon$(document).ready(...)
开始 js 文件,我以为这就足够了。 - Adam