How to use defer/async attributes in script tag properly

Question

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

<script>
    $(document).ready(function(){
      alert('hi');
  });
</script>

it doesn't work too.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Defer attribute</title> <!-- Bootstrap core CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"> <style> .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; } } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" defer></script> <script> $(document).ready(function() { var owl = $('.owl-carousel'); owl.owlCarousel({ margin: 10, loop: true, responsive: { 0: { items: 1 }, 600: { items: 2 }, 1000: { items: 3 } } }); }); </script> </head> <body> <div class="container"> <h1 class="text-center">Hello World!</h1> <div class="owl-carousel"> <div class="item"> <h2>Swipe</h2> </div> <div class="item"> <h2>Drag</h2> </div> <div class="item"> <h2>Responsive</h2> </div> <div class="item"> <h2>CSS3</h2> </div> <div class="item"> <h2>Fast</h2> </div> <div class="item"> <h2>Easy</h2> </div> <div class="item"> <h2>Free</h2> </div> <div class="item"> <h2>Upgradable</h2> </div> <div class="item"> <h2>Tons of options</h2> </div> <div class="item"> <h2>Infinity</h2> </div> <div class="item"> <h2>Auto Width</h2> </div> </div> </div> </body> </html>

Answer 1

If you want to use defer attribute in your external scripts you should use window.onload event because it fires after all page is loaded including deferred scripts. Try:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Defer attribute</title> <!-- Bootstrap core CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"> <style> .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; } } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" defer></script> <script> window.onload = function() { var owl = $('.owl-carousel'); owl.owlCarousel({ margin: 10, loop: true, responsive: { 0: { items: 1 }, 600: { items: 2 }, 1000: { items: 3 } } }); }; </script> </head> <body> <div class="container"> <h1 class="text-center">Hello World!</h1> <div class="owl-carousel"> <div class="item"> <h2>Swipe</h2> </div> <div class="item"> <h2>Drag</h2> </div> <div class="item"> <h2>Responsive</h2> </div> <div class="item"> <h2>CSS3</h2> </div> <div class="item"> <h2>Fast</h2> </div> <div class="item"> <h2>Easy</h2> </div> <div class="item"> <h2>Free</h2> </div> <div class="item"> <h2>Upgradable</h2> </div> <div class="item"> <h2>Tons of options</h2> </div> <div class="item"> <h2>Infinity</h2> </div> <div class="item"> <h2>Auto Width</h2> </div> </div> </div> </body> </html>

How to use defer/async attributes in script tag properly

Question

1 answers

solution1
2 ACCPTED 2018-10-09 14:11:41

How to use defer/async attributes in script tag properly

Question

1 answers

solution1 2 ACCPTED 2018-10-09 14:11:41

solution1
2 ACCPTED 2018-10-09 14:11:41