堆棧內存溢出
  簡體   English   中英

多個延遲加載實例| Java腳本

[英]Multiple Defer Loading instances | Javascript

 原文  2012-06-07 16:08:28  8   6    javascript/ loading/ payload

問題描述

我目前正在閱讀有關推遲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文件 。

我將如何使用Google的示例代碼來實現這一目標？

非常感謝您的指導。

6 個解決方案

解決方案1
 5 已采納  2013-09-18 15:06:07

以下腳本有效。...只需將以下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>

歡迎使用親愛的michael mc gurk以下是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合並到一個文件中，並使用一個URL。 如果您真的想單獨加載它們，只需鏈接getScripts： 

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

快樂編碼:)

解決方案2
 2  2012-06-07 16:14:56

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

解決方案3
 2  2013-12-12 22:05:49

這可能有效！ 您可能可以更短地重寫代碼。 祝好運！ 

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

解決方案4
 1  2013-09-13 10:18:46

我認為提供的解決方案無效。

如下所示追加腳本將不遵守腳本破壞依存關系的順序。

解決方案5
 0  2012-06-07 16:19:00

您只應給函數一個參數，使其能夠使用不同的腳本來調用它： 

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

解決方案6
 0  2014-08-01 14:53:50

將您的文件路徑放在數組中並循環遍歷

例 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 推遲加載javascript 推遲加載JavaScript（3個文件） 延遲解析/加載Javascript 推遲在Symfony 1.4中加載JavaScript 如何延遲加載 JavaScript 文件？ 如何使用 JavaScript 推遲多個樣式表 Javascript數組推遲JS加載Joomla 延遲加載JavaScript - 未捕獲的ReferenceError：$未定義 推遲加載和解析PrimeFaces JavaScript文件 同時使用延遲和異步加載JavaScript文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM