title: How to use defer/async attributes in script tag properly
body: <p>I run the following code with "defer" attribute in all external js file but Owl Carousel doesn't load when I use defer attribute in script tag. It also shows an error "$" is not defined. If I remove defer attribute from script tag everything works fine without any errors.
  Note: for some reason I can't put owl-carousel demo script in another external js file. Is there any way to fix this. Also not just owl-carousel, if I put</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
        alert('hi');
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>it doesn't work too.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;title&gt;Defer attribute&lt;/title&gt;
  
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"&gt;
    &lt;style&gt;
      .item {
        background: #ff3f4d;
      }
      
      h2 {
        color: #FFF;
        text-align: center;
        padding: 5rem 0;
        margin: 0;
        font-style: italic;
        font-weight: 300;
      }
      
      @media only screen and (min-width: 40.0625em) {
        h2 {
          font-size: 2.3125rem;
        }
      }
    &lt;/style&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" defer&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js" defer&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" defer&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" defer&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
          margin: 10,
          loop: true,
          responsive: {
            0: {
              items: 1
            },
            600: {
              items: 2
            },
            1000: {
              items: 3
            }
          }
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="text-center"&gt;Hello World!&lt;/h1&gt;
      &lt;div class="owl-carousel"&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Swipe&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Drag&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Responsive&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;CSS3&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Fast&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Easy&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Free&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Upgradable&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Tons of options&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Infinity&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;h2&gt;Auto Width&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>