CODEWITHSUNDEEP
javascriptjquerylazy-loadingdocument-ready
Salman Arshad
Salman Arshad

Reputation: 272106

How to lazy-load jQuery itself, specially when $(document).ready() is being used

I use jQuery on my website like this:

<head>
<script src="http://ajax.googleapis.com/.../jquery.min.js" ...></script>
</head>

I then use:

$(document).ready(function(){
});

On some occasions, this event is used:

$(document).ready(function(){
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "http://www.script-host.com/.../script.js";
    document.getElementsByTagName("head")[0].appendChild(s);
});

Now jquery.js seems to be (one of) the heaviest resource on my website in terms of filesize. I therefore want to lazy load jquery.js itself but I understand that this would cause all document.ready events to fail. What is the best workaround for this?

Upvotes: 3

Views: 1786

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

Maybe this recent article may help you: http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

the idea behind is to create a temporary $ function in which you collect all function to be executed at domready event and then it's replaced later when you load jQuery at the bottom of the page.

Upvotes: 4

Deniss Kozlovs
Deniss Kozlovs

Reputation: 4841

You could load jQuery at bottom of the page, not in <head>. It will still use bandwidth, but it should be visually faster.

Upvotes: 3

Related Questions