Materialise js не работает при добавлении отсрочки в тег скрипта

Question

У меня возникает проблема, когда я добавляю asyn c или откладываю в теге скрипта

<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>

Если ваш скрипт inline (то есть прямо внутри вашего 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>