d0ublezer0

Порядок загрузки и выполнения JS

Recommended Posts

В начале страницы:
<script async type="text/javascript" src="/templates/fd/js/custom.js"></script>
<script async type="text/javascript" src="/templates/fd/js/owl.carousel.min.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.event.move.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.twentytwenty.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.inputmask.bundle.min.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.toc.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.sticky.js"></script>
<script async type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

/* тут html и php */

В конце страницы:

<script defer type="text/javascript" src="/templates/fd/js/main.js"></script>

предполагалось, что последний скрипт с defer загрузится и выполнится только когда загрузилось всё, но у меня валятся ошибки инициализации

Uncaught TypeError: $(...).inputmask is not a function

значит, не успели загрузиться скрипты.

при том в последнем файле main.js

все обращения к функциям обёрнуты в 

$(document).ready(function () { /* тут код */});

 

как гарантированно загрузить всё, при этом не мешая загружаться странице?

Share this post


Link to post
Share on other sites
<script  async

не ждет загрузки скрипта и видимо когда у вас загружается /templates/fd/js/mai n.js не все скрипты в начале страницы уже успели загрузиться

Share this post


Link to post
Share on other sites
25 минут назад, Switch74 сказал:

не ждет загрузки скрипта 

Верно.

Я пытался применить знания из этой статьи, предполагая, что скрипты с async будут грузиться как попало, а defer загрузится уже после всего-всего.

 

Share this post


Link to post
Share on other sites
25 минут назад, Switch74 сказал:

попробуйте указать defer для всех

В этом весь замысел теряется. Скрипты, расположенные внизу страницы и без указания defer прекрасно грузятся последовательно. но загружаться-то они начинают после основного кода. А идея была в том, чтобы грузить их параллельно, не мешая коду. А вот обратиться к ним - только после загрузки всего.

Можно конечно в main.js проверять наличие загруженных функций, но это не значит, что они будут привязаны к объектам на странице, когда наконец-то загрузятся.

Share this post


Link to post
Share on other sites

ну проведите анализ зависимости скриптов
defer так же грузит асинхронно, только выполняет в нужной последовательности, а не как только загрузится

 

Share this post


Link to post
Share on other sites

О, я не до конца понял статью, значит.

Отлично, тогда defer подходит, т.к. зависимость известна.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Super_Saimo
      Добрый день! Столкнулся с проблемой отображения информации из localStorage после перезагрузки страниц. Делаю to do list, добавление тасков, удаление проходит нормально, добавляются элементы в localStorage, но после перезагрузки список тасков пуст на странице.  Сам код https://jsfiddle.net/zdbmsjv2/ Извиняюсь за чрезмерное количество комментариев. Писал для себя, чтобы не забыть потом. 
    • By reevierevi
      В общем, написал вот такой код, где красный блок див можно схватить и перетаскивать, но не знаю как наложить ограничение на то, чтобы этот красный блок див не заходил за рамки второго -- серого блока с размером 500х500 пикселей. Как это можно сделать? 
      Хотелось бы увидеть готовый код, чтобы можно было в нём покопаться и разобраться самому. Заранее спасибо.
       
      <html>  <head><title>Moving</title></head>  <body onload= "init()">  <h1 style="margin-left: 650px; color: red;">Адаптировано для Chrome</h1> <div id='serkv' style="position:absolute;width:500;height:500;background-color:grey;left:10;top:10"> <DIV id='kv' style="position:absolute;left:10;top:10;width:50;height:50;background-color:red">  </div>  </div> </body>  <SCRIPT>      kv.onmousedown = function(event) {       kv.style.position = 'absolute';       kv.style.zIndex = 1000;       document.body.appendChild(kv);       moveAt(event.pageX, event.pageY);       function moveAt(pageX, pageY) {         kv.style.left = pageX - kv.offsetWidth / 2 + 'px';         kv.style.top = pageY - kv.offsetHeight / 2 + 'px';       }       function onMouseMove(event) {         moveAt(event.pageX, event.pageY);       }       document.addEventListener('mousemove', onMouseMove);       kv.onmouseup = function() {         document.removeEventListener('mousemove', onMouseMove);         kv.onmouseup = null;       };     };     kv.ondragstart = function() {       return false;     };    </SCRIPT>  </html>  
    • By AnfisaMu
      https://youtu.be/7pr0x3elUzQ  Буду признательна если поможете При наведении на блок он поворачивается под углом, при клике на блок - открывается сам блок на весь экран (плавно), при клике на лого - сворачивается открывшийся блок

  • Member Statistics

    46,293
    Total Members
    3,128
    Most Online
    Foxyded support
    Newest Member
    Foxyded support
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.