Created
February 1, 2013 12:06
-
-
Save brunoais/4690937 to your computer and use it in GitHub Desktop.
This is a commented example code about adding jQuery in an async way.
As long as you don't use jQuery stuff outside the fake ready() or in functions/methods that are called before the ready() method, all works without any modifications.
Tested on IE 7+, FF 3.6+, Chrome 24, Opera 12.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<script type="text/javascript">(function(a,c,d){function b(b,c){"ready"==b?a.bindReadyQ.push(c):a.readyQ.push(b)}a.readyQ=[];a.bindReadyQ=[];var e={ready:b,bind:b};a.$=a.jQuery=function(a){if(a===c||a===d)return e;b(a)}})(window,document);function jQOk(){var a=jQuery,c=document;a.each(readyQ,function(c,b){a(b)});a.each(bindReadyQ,function(d,b){a(c).bind("ready",b)})} function jQErr(){var a=document.createElement("script");a.type="text/javascript";a.src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";a.async=!1;a.defer=!1;a.onload=jQOk;document.getElementsByTagName("head")[0].appendChild(a)};</script> | |
<script async type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"onload="jQOk()"onerror="jQErr()"></script> | |
<!--[if lte IE 8]><script type="text/javascript">if("undefined"==typeof jQuery.fn){jQErr();var interval=setInterval(function(){jQOk();clearInterval(interval)},100);setTimeout(function(){clearInterval(interval)},12E3)};</script><![endif]--> | |
<script async type="text/javascript"src="yourMainCode"></script> | |
</head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="en-US"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Page w/jQuery template</title> | |
<script type="text/javascript"> | |
//This takes care of collecting all ready() requests. | |
//From: http://blog.colin-gourlay.com/blog/2012/02/safely-using-ready-before-including-jquery/ | |
(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document); | |
function jQOk(){ | |
// With this, jQuery is loaded. Take care of giving the stuff to it. | |
(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document); | |
} | |
function jQErr(){ | |
// jQuery load failed. Use the replacement. | |
var script_tag = document.createElement('script'); | |
script_tag.type = 'text/javascript'; | |
//script_tag.src = 'http://localhost/localjQuery.js'; | |
script_tag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'; | |
script_tag.async = false; | |
script_tag.defer = false; | |
script_tag.onload = jQOk; | |
document.getElementsByTagName('head')[0].appendChild(script_tag); | |
} | |
</script> | |
<!-- onload and onerror must be used this way to make sure that the events are properly attached--> | |
<script async type="text/javascript" src="htt://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" | |
onload="jQOk(this, event)" onerror="jQErr(this, event)" ></script> | |
<!--[if lte IE 8]> | |
<script type="text/javascript"> | |
// IE <= 8 does not support async, and also, does not support onerror | |
// All other "used" browsers support onerror | |
// I have to use a method from jQuery because a fake one already exists. | |
if(typeof jQuery.fn == "undefined"){ | |
jQErr(); | |
var interval = setInterval(function (){jQOk(); clearInterval(interval)}, 100); | |
// Prevent infinite loops | |
setTimeout(function(){clearInterval(interval)}, 12000); | |
} | |
</script> | |
<![endif]--> | |
<!-- You may do anything you want. Just wait for the DOMContentLoaded ($.ready() callback)--> | |
<script type="text/javascript" async src="yourMainCode" ></script> | |
<script type="text/javascript" async src="yourMainCode2" ></script> | |
<!-- ... --> | |
<!-- You may place the stylesheets before, if you feel like it. | |
Depends more on taste that anything else --> | |
<link rel="stylesheet" href="fakeSheet"/> | |
</head> | |
<body> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment