如何正确使用脚本标记中的延迟/异步属性 [英] How to use defer/async attributes in script tag properly
本文介绍了如何正确使用脚本标记中的延迟/异步属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在所有外部js文件中使用"defer"属性运行以下代码，但是当我在脚本标记中使用defer属性时，Owl Carousel无法加载.它还显示未定义错误"$".如果我从脚本标记中删除defer属性，则一切正常，没有任何错误. 注意:由于某种原因，我无法将owl-carousel演示脚本放在另一个外部js文件中.有没有什么办法解决这一问题.如果我放的话，还不只是猫头鹰传送带
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>
它也不起作用.
<!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事件，因为该事件会在加载所有页面(包括延迟的脚本)后触发.试试:
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>
这篇关于如何正确使用脚本标记中的延迟/异步属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
