Defer loading of JavaScript - Uncaught ReferenceError: $ is not defined

asynchronous-javascript, deferred-loading, javascript, jquery

Solution

You cannot use `jQuery` before it is loaded. If you move the `<script src="jquery.js" />` at the bottom of your page you must also move all the lines that use `$(...)` below it.

There is a tricky solution that goes something along these lines:

1) Defining few variables at the top of your page:

var _jqq = [];
var $ = function(fn) {
    _jqq.push(fn);
};

2) In the middle of the page you can write:

$(function() {
    alert("document ready callback #1");
});
$(function() {
    alert("document ready callback #2");
});

3) At the bottom of your page, include jQuery:

<script src="//code.jquery.com/jquery.min.js"></script>

4) And finally:

$(function() {
    $.each(_jqq, function(i, fn) {
        fn();
    });
});

Demo

Problem

I use google code to defer loading javascript (google pages) But I have some inline javascripts such as: ``` <script type="text/javascript"> $(function () { alert("please work"); }); </script> ``` And this gives me: Uncaught ReferenceError: $ is not defined I think I need some function, which was triggered after jQuery was loaded and init my inline javascripts. But if there is another way, I will be glad. EDIT: Some of you are completely out of topic. Mahesh Sapkal was close. With this code I have no error, but still don't work ``` <head> <script type="text/javascript"> var MhInit = NULL; // Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); MhInit = element.src = "my_packed_scripts.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </head> <body> <script type="text/javascript"> MhInit.onload = function() { console.debug("here"); }; </script> </body> ```

Original source