[英]How to use defer/async attributes in script tag properly
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. 我在所有外部js文件中使用“ defer”属性运行以下代码,但是当我在脚本标签中使用defer属性时,Owl Carousel无法加载。 It also shows an error "$" is not defined.
它还显示未定义错误“ $”。 If I remove defer attribute from script tag everything works fine without any errors.
如果我从脚本标记中删除defer属性,则一切正常,没有任何错误。 Note: for some reason I can't put owl-carousel demo script in another external js file.
注意:由于某种原因,我无法将owl-carousel演示脚本放在另一个外部js文件中。 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>
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. 如果要在外部脚本中使用
defer
属性,则应使用window.onload
事件,因为它会在加载所有页面(包括延迟脚本)后触发。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.