Multiple Defer Loading instances | Javascript

Question 1

Multiple Defer Loading instances | Javascript

javascript loading payload

michaelmcgurk · Jun 7, 2012 · Viewed 10.3k times · Source

Answer

Answer

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

Question 2

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.

Multiple Defer Loading instances | Javascript

Answer

Related questions