Question

我在所有外部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>

Answer 1

如果您想在外部脚本中使用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>

如何正确使用脚本标记中的延迟/异步属性

1 个答案: