title: How to defer inline Javascript?
body: <p>I have the following html code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer&gt;&lt;/script&gt;
      &lt;!-- 26 dec flexslider js --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer&gt;&lt;/script&gt;
      &lt;script defer&gt;
      (function($) {
          $(document).ready(function() {
              //do something with b-lazy plugin, lightbox plugin and then with flexslider
          });
      })(jQuery);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get an error, saying jQuery is not defined. Now even if I remove defer from my inline JS code, it says jQuery is undefined. For some reason I have to keep the jQuery plugins in the head and keep my JS code inline. My question is:</p>
  
  <ol>
  <li><p>Why doesn't inline Javascript code get deferred when <code>defer</code> attribute is present on it?  </p></li>
  <li><p>Is there a way to imitate the defer behavior on my inline Javascript code? I can put that at the end of body tag if required.</p></li>
  </ol>