我在所有外部 js 文件中使用“defer”属性运行以下代码，但当我在脚本标记中使用 defer 属性时，Owl Carousel 不会加载。它还显示错误“$”未定义。如果我从脚本标记中删除延迟属性，一切都会正常工作，没有任何错误。
注意：由于某种原因，我无法将 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
