title: Defer loading of JavaScript - Uncaught ReferenceError: $ is not defined
body: <p>I use google code to defer loading javascript (<a href="https://developers.google.com/speed/docs/best-practices/payload?hl=cs&amp;csw=1#DeferLoadingJS" rel="nofollow">google pages</a>)</p>
  
  <p>But I have some inline javascripts such as:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      alert("please work");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this gives me:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: $ is not defined</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>EDIT:</p>
  
  <p>Some of you are completely out of topic. Mahesh Sapkal was close.</p>
  
  <p>With this code I have no error, but still don't work</p>
  
  <pre><code>&lt;head&gt;
      &lt;script type="text/javascript"&gt;
          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;
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;
          MhInit.onload = function() {
              console.debug("here");
          };
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>