多个延迟加载实例 |Javascript
Multiple Defer Loading instances | Javascript
我目前正在阅读这篇关于延迟加载Javascript的文章：https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS
他们使用以下脚本：
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
我目前有 4 个单独的 Javascript 文件，我想"推迟"。
我将如何使用谷歌的示例代码来实现这一点？
非常感谢您的任何指示。
以下脚本正在工作....只需将下面的 HTML 和 JavaScript 复制粘贴到 HTML 文件中即可享受
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>HTML Lazy Loading</title>
<link href="/skins/Skin_1/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function myGetTime() {
var dd = new Date();
var hh = dd.getHours();
var mm = dd.getMinutes();
var ss = dd.getSeconds();
var ms = dd.getMilliseconds();
return ("<br/>The time is now: " + hh + ":" + mm + ":" + ss + ":" + ms + "<br/>");
}
</script>
</head>
<body>
<div style="color:blue;margin-left:10px;margin-top:10px;" >
<script type="text/javascript">
document.write("Time before loading all scripts");
document.write(myGetTime() +"<br/>");
</script>
<div style="color:blue;margin-left:10px;margin-top:10px;" >
<script type="text/javascript">
function downloadJSAtOnload() {
var element2 = document.createElement("script");
element2.src = "https://jqueryjs.googlecode.com/files/jquery-1.2.6.js";
document.body.appendChild(element2);
var element4 = document.createElement("script");
element4.src = "https://www.apparelnbags.com/jscripts/validation_forms.js";
document.body.appendChild(element4);
var element5 = document.createElement("script");
element5.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
document.body.appendChild(element5);
var element6 = document.createElement("script");
element6.src = "https://www.apparelnbags.com/jscripts/slideshow_header.js";
document.body.appendChild(element6);
var element6 = document.createElement("script");
element6.src = "https://www.apparelnbags.com/jscripts/slideshow_header.js";
document.body.appendChild(element6);
var element7 = document.createElement("script");
element7.src = "https://www.apparelnbags.com/jscripts/jquery.js";
document.body.appendChild(element7);
var element8 = document.createElement("script");
element8.src = "https://www.apparelnbags.com/jscripts/jquery.lazyload.js";
document.body.appendChild(element8);
var element9 = document.createElement("script");
element8.src = "http://www.apparelnbags.com/AnBTreeViewMenu/jsTreeMenu/jMenu.js";
document.body.appendChild(element9);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</div>
<div id="dvHeaderMiddle" style="position:absolute; top:400px; left:350px;">
</div>
<script type="text/javascript">
document.write("Time After loading all scripts");
document.write(myGetTime() +"<br/>");
</script>
</body>
</html>
欢迎亲爱的迈克尔·麦克·古尔克下面是StackOverFlow的另一个答案。而且也非常方便
在此处输入链接说明
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
// YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
});
})();
我真的会把jQuery和jQuery-UI组合到一个文件中，并使用一个网址。如果你真的想单独加载它们，只需链接getScripts：
getScript('http://myurltojquery.js',function(){
getScript('http://myurltojqueryUI.js',function(){
//your tab code here
})
});
快乐编码:)
在 downloadJSAtOnload() 函数中，您只需加载所有三个脚本。 这是最简单的复制/粘贴方法：
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "deferredfunctions2.js";
document.body.appendChild(element);
element = document.createElement("script");
element.src = "deferredfunctions3.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
而且，这里有一个更干净的方法：
function loadScript(src) {
var element = document.createElement("script");
element.src = src;
document.body.appendChild(element);
}
// Add a script element as a child of the body
function downloadJSAtOnload() {
loadScript("script1.js");
loadScript("script2.js");
loadScript("script3.js");
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
我认为提供的解决方案不起作用。
按如下所示追加脚本将不遵守脚本中断依赖项的顺序。
这可能有效！ 而且你可以重写更短的代码。祝你好运！
<script type="text/javascript">
var mobjs1 = "http://yoursite.com/js/mobile1.js";
var mobjs2 = "http://yoursite.com/js/mobile2.js";
var mobjs3 = "http://yoursite.com/js/mobile3.js";
var mobjs4 = "http://yoursite.com/js/mobile4.js";
var mobcss = "http://yoursite.com/css/mobile.css";
var stylesheet = "stylesheet";
function downloadJSAtOnload() {
var css = document.createElement("link");
var js1 = document.createElement("script");
var js2 = document.createElement("script");
var js3 = document.createElement("script");
var js4 = document.createElement("script");
css.href= mobcss;
css.rel= stylesheet;
js1.src = mobjs1;
js2.src = mobjs2;
js3.src = mobjs3;
js4.src = mobjs4;
document.body.appendChild(css);
document.body.appendChild(js1);
document.body.appendChild(js2);
document.body.appendChild(js3);
document.body.appendChild(js4);
}
// Browser Capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
将文件路径放在一个数组中并循环访问该数组
例
<script type="text/javascript">
function downloadJSAtOnload() {
var jsFiles = ['js/jquery.script1.js','js/jquery.script2.js','js/jquery.script3.js'];
var fileAmount = jsFiles.length;
for (var i = 0; i < fileAmount; i++) {
var element = document.createElement("script");
element.src = jsFiles[i];
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>
你只需要给函数一个参数，以便能够用不同的脚本调用它：
// Add a script element with the url as a child of the body
function downloadJS(url) {
var element = document.createElement("script");
element.src = url;
document.body.appendChild(element);
}
onload(function(){
downloadJS("deferredfunctions.js");
downloadJS("deferredfunctions2.js");
downloadJS("deferredfunctions3.js");
});
相关文章：
- 我应该如何用javascript实例化这个日期
- bootstrap选择javascript实例化不创建对象
- 嵌套函数中的 JavaScript 实例共享
- 运算符的 JavaScript 实例在应该为 false 时返回 true
- 为什么我的 JavaScript 实例返回相同的内容
- 类的 JavaScript 实例
- Javascript 实例变量显示为未定义
- 为什么可以'我在Rhino上使用JavaScript实例化了TestCase的一个子类
- Javascript实例上下文原型
- 不会扰乱eslint的javascript实例化模式
- 何时使用对象.prototype / JavaScript实例方法
- 如何判断两个JavaScript实例是否属于同一类类型
- 闭包中的Javascript实例化.如何使工厂和模型独立
- TypeError & # 39;事# 39;未定义，带有javascript实例
- 如何在jquery中使用javascript实例/通过jquery选择javascript句柄
- 在JavaScript实例上编写单个原型和使用多个原型之间的区别?只是风格
- javascript实例方法未找到:object#
- 从构造函数中引用Javascript实例变量而不使用'this'关键字
- Javascript实例和这个
- Javascript:实例化对象数组的最佳方式
