[英]How to use defer/async attributes in script tag properly
我在所有外部js文件中使用“ defer”屬性運行以下代碼，但是當我在腳本標簽中使用defer屬性時，Owl Carousel無法加載。 它還顯示未定義錯誤“ $”。 如果我從腳本標記中刪除defer屬性，則一切正常，沒有任何錯誤。 注意：由於某種原因，我無法將owl-carousel演示腳本放在另一個外部js文件中。 有沒有什么辦法解決這一問題。 如果我放的話，還不只是貓頭鷹傳送帶
<script>
$(document).ready(function(){
alert('hi');
});
</script>
它也不起作用。
<!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>
如果要在外部腳本中使用defer屬性，則應使用window.onload事件，因為它會在加載所有頁面（包括延遲腳本）后觸發。 嘗試：
<!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>
您可以在 HTML 腳本標簽上同時使用 async 和 defer 屬性嗎？
[英]Can you use both the async and defer attributes on a HTML script tag?
HTML 中腳本標記中的 async 和 defer 屬性是否與 SPA 應用程序無關？
[英]Are async and defer attributes in script tag in HTML irrelevant for SPA apps?
為什么要通過 Javascript 創建腳本標簽，而不是使用延遲或異步腳本標簽屬性？
[英]Why create script tag via Javascript, instead of using defer or async script tag attributes?
我們是否堅持`有什么關系<script>` tag in the head or not, assuming we’re already using `async` or `defer`?
[英]How does it matter whether we stick the `<script>` tag in the head or not, assuming we’re already using `async` or `defer`?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.