ahsquared/defer_doc_ready_jquery.html

## defer_doc_ready_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- this collects the jquery document ready calls
 // used with gratitude from: http://blog.colin-gourlay.com/blog/2012/02/safely-using-ready-before-including-jquery/ -->
<script>(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)</script>
</head>
<body>
<!-- this is on the page and you want to defer it -->
<script type="text/javascript">
    $(document).ready(function () {

        (function () {
            var doc_ready = $.Deferred();
            $(doc_ready.resolve);
            $.when(doc_ready).then(function () {
                console.log("defer done");
            });
        })();
    });
</script>

<!-- at the bottom of the page
// load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script defer src="main.js"></script>
// this calls the collected document readies from the top
<script>(function ($, d) { $.each(readyQ, function (i, f) { $(f) }); $.each(bindReadyQ, function (i, f) { $(d).bind("ready", f) }) })(jQuery, document)</script>
</body>
</html>

## main.js
$(document).ready(function() {
    console.log('ready done');
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- this collects the jquery document ready calls
	// used with gratitude from: http://blog.colin-gourlay.com/blog/2012/02/safely-using-ready-before-including-jquery/ -->
	<script>(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)</script>
	</head>
	<body>
	<!-- this is on the page and you want to defer it -->
	<script type="text/javascript">
	$(document).ready(function () {

	(function () {
	var doc_ready = $.Deferred();
	$(doc_ready.resolve);
	$.when(doc_ready).then(function () {
	console.log("defer done");
	});
	})();
	});
	</script>

	<!-- at the bottom of the page
	// load jquery -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script defer src="main.js"></script>
	// this calls the collected document readies from the top
	<script>(function ($, d) { $.each(readyQ, function (i, f) { $(f) }); $.each(bindReadyQ, function (i, f) { $(d).bind("ready", f) }) })(jQuery, document)</script>
	</body>
	</html>