Skip to content

Instantly share code, notes, and snippets.

@brunoais
Created February 1, 2013 12:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brunoais/4690937 to your computer and use it in GitHub Desktop.
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.
<!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>
<!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