Multiple Defer Loading instances | Javascript

StackOverflow https://stackoverflow.com/questions/10935622

  •  13-06-2021
  •  | 
  •  

Pregunta

I'm currently reading this article on Deferring the loading of Javascript: https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS

They use this script:

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

I currently have 4 separate Javascript files that I'd like to "defer".

How would I achieve this using Google's example code?

Many thanks for any pointers.

¿Fue útil?

Solución

Following script is working.... just copy paste below html and javascript in an html file and enjoy

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

Welcome Dear michael mc gurk Below is another answer of StackOverFlow. And it is also pretty handy

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
        });
    })();

I would really combine jQuery and jQuery-UI into one file and use a url to it. If you REALLY wanted to load them separately, just chain the getScripts:

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

Happy Coding :)

Otros consejos

In the downloadJSAtOnload() function, you just load all three scripts. Here's the simplest copy/paste method:

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

And, here's a little cleaner way:

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;

I don't think the provided solutions work.

Appending the script as below will not respect the order of the script breaking dependecy.

This might work! and you can probably rewrite the code shorter. Good luck!

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

Put your filepaths in an array and loop through that

example

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

You just should give the function a parameter to be able to invoke it with different scripts:

 // 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");
 });
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top