How to defer javascript

Question

I am using the fancybox jquery plugin and I am trying to defer the javascript to the end of page loading

    <html>
    <head>
    </head>
    <body> 
        content
/*bottom of body*/
        <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" ></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".example3").fancybox({
                    'transitionIn'  : 'none',
                    'transitionOut' : 'none'    
                });
            });
        </script>
    </body>
    </html>

At this point the plugin works but the javascript is not deferred. Then I change the script to

<script defer="defer" type="text/javascript">
    window.onload=function(){
        var mycode;
        mycode=document.createElement("script");
        mycode.type="text/javascript";
        mycode.src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js";
        document.getElementsByTagName("head")[0].appendChild(mycode);
    }
</script>

like I read here, but then the plugin sometimes work, sometimes it doesn't work. According to google pagespeed I still need to defer the jquery-1.8.3.min.js script. If I defer it the same way, google pagespeed seems ok with it, but then the plugin doesn't work at all.

How am I supposed to do this?

Complete solution based on Jamed Donnelly's answer:

I removed all .js scripts from the head. Then I added this just before the tag:

<script>
(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("jquery-1.8.3.min.js",function(){
    getScript("jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js", function() {});
    getScript("myCustomScript.js", function() {});
});

})();
</script>

I created a file myCustomScript.js:

$(document).ready(function(){ 
    $(".example3").fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none'    
    });
});

And that's all.

James Donnelly · Accepted Answer · 2014-05-20 08:00:17Z

1

What I've been using for a while now is:

(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("whatever1.js",function(){
        getScript("whatever2.js", function() {});
    });
})();

I'll have a dig to try and find where I got this from.

Edit: No luck on finding the source of this, but it's very similar to this article on CSS Tricks.

In your case you'd do something like:

getScript("jquery-1.8.3.min.js",function(){
    getScript("jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js", function() {});
    getScript("myCustomScript.js", function() {});
});

Where myCustomScript.js is a file containing your document ready handler. This basically loads jQuery, then once that's loaded it then loads the plugin and your script.

edited May 20, 2014 at 8:00

answered May 20, 2013 at 10:17

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

erdomester Over a year ago

I put the whole function between <script></script> tags just before the </body> tag and removed the two script lines. It's not working. Did I do something wrong? I updated my question

James Donnelly Over a year ago

It's not working because jQuery will not be included until after the page has loaded, whereas your <script> tags before </body> will run beforehand. To defer the loading you'll need to create a new .js file to hold your $(document).ready(function(){ ... });.

erdomester Over a year ago

I thought I was missing that. I am more like an html+css guy, could you help me with what you mean by that?

James Donnelly Over a year ago

Create a new file called myNewFile.js and move your $(document).ready(function(){ ... }); into that file, then after calling getScript(jquery-1.8.3.min.js")... call getScript("myNewFile.js", function() {});.

erdomester Over a year ago

Best monday ever. Thank you!

Joseph · Accepted Answer · 2013-05-20 10:09:12Z

0

Never rely on defer as it is not supported cross-browser. I suggest you load the scripts at the bottom, just before </body> with libraries loaded first (that would be what you did in the first place).

answered May 20, 2013 at 10:09

Joseph

120k31 gold badges186 silver badges238 bronze badges

1 Comment

erdomester Over a year ago

But like I said, it's not always working. E.g I've moved <script src="jquery-1.8.3.min.js"></script> just before the </body> tag from the head and a script stopped working.

Collectives™ on Stack Overflow

How to defer javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related