本文介绍了如何正确使用脚本标记中的延迟/异步属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这篇关于如何正确使用脚本标记中的延迟/异步属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-16 20:10