javascript - 在脚本标签中添加延迟时，Materialize js 不起作用

Question

在脚本标记中添加异步或延迟时遇到问题

<script type='text/javascript' async defer src='materialize.js'></script>

我在控制台中收到错误，M 未定义

uncaught ReferenceError: M is not defined

这就是我正在尝试的

document.addEventListener('DOMContentLoaded', function() {

    var elemt = document.querySelector('.carousel-top');
    var itm_elemt = document.querySelector('.carousel-item img');
    if(itm_elemt != null){
        elemt.style.height = itm_elemt.offsetHeight+'px';
    }
    M.Carousel.init(elemt, {numVisible : 3, dist:0, shift: 8});
});

我不知道如何解决此错误，请帮忙

Answer 1

async或defer ？

假设您的页面中包含这些脚本:

<script src="a.js"></script>
<script src="b.js"></script>

添加async时在它们上，它们将被异步加载并在下载后立即执行。但他们的执行顺序不会被保留。如果a.js加载时间较长，b.js将首先执行。

与 defer ，文件也会异步下载，但它们将始终按照声明的顺序执行。

就您而言，因为您自己的脚本需要 materialize.js ，您将需要使用 defer保留顺序。

为什么是M没有定义？

订单只会在多个 defer 之间保留脚本。我猜你没有使用 defer根据您自己的脚本。如果它在自己的文件中，只需添加属性:

<script src="materialize.js" defer></script>
<script src="myScript.js" defer></script>

如果您的脚本是内联(即直接在 HTML 中)，您可以使用以下技术，通过加载 materialize.js使用 JS 而不是 HTML <script>标记并等待其 load触发事件:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Add the script in the page
  var script = document.createElement('script');
  script.onload = runMyScript;
  script.src = "materialize.js";
  document.head.appendChild(script);

  function runMyScript() {
    // M is now available
    var elemt = document.querySelector('.carousel-top');
    var itm_elemt = document.querySelector('.carousel-item img');
    if (itm_elemt != null) {
      elemt.style.height = itm_elemt.offsetHeight + 'px';
    }
    M.Carousel.init(elemt, {
      numVisible: 3,
      dist: 0,
      shift: 8
    });
  }
});
</script>