多个延迟加载实例| JavaScript的

我目前正在读这篇文章推迟的JavaScript加载： https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS 多个延迟加载实例| JavaScript的

他们使用这个脚本：

<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文件，我想“推迟”。

如何使用Google的示例代码实现此目的？

非常感谢任何指针。

来源

2012-06-07 michaelmcgurk

你就不能这样做与其他3 downloadJSAtOnload（）？或者我错过了什么... – FatalError

下面的脚本是工作.... 只要复制以下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>

欢迎亲爱的迈克尔MC gurk 下面是计算器的另一个答案。同时，它也很方便

enter link description here

(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到一个文件中，并使用URL它。如果你真的想单独加载它们，只是链getScripts：

getScript('http://myurltojquery.js',function(){ 
     getScript('http://myurltojqueryUI.js',function(){ 
       //your tab code here 
     }) 
});

编码快乐:)

来源

2013-09-18 15:06:07

在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;

来源

2012-06-07 16:14:56 jfriend00

你刚才应该给函数的参数，能够与不同的脚本调用它：

// 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"); 
});

来源

2012-06-07 16:19:00 Bergi

我不认为提供的解决方案的工作。

如下追加脚本不会影响脚本破坏依赖性的顺序。

来源

2013-09-13 10:18:46 Andrea

这可能会实现！你可以重写代码更短。祝你好运！

<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>

来源

2013-12-12 22:05:49 1453939

把你的文件路径在数组中，并循环通过

例如

<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>

来源

2014-08-01 14:53:50 MikeyMo

多个延迟加载实例| JavaScript的

回答

相关问题