d0ublezer0

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

Рекомендованные сообщения

В начале страницы:
<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 () { /* тут код */});

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
<script  async

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
25 минут назад, Switch74 сказал:

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

Верно.

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
25 минут назад, Switch74 сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: 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>  
    • Автор: AnfisaMu
      https://youtu.be/7pr0x3elUzQ  Буду признательна если поможете При наведении на блок он поворачивается под углом, при клике на блок - открывается сам блок на весь экран (плавно), при клике на лого - сворачивается открывшийся блок

    • Автор: PShim
      Здравствуйте. Подскажите пожалуйста, что стоит дописать в скрипт чтобы файл сохранялся со стилем(css). Есть свой скрипт и есть взятый из jq(https://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html). 
      function Export2Doc(element, filename = ''){ var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var postHtml = "</body></html>"; var html = preHtml+document.getElementById(element).innerHTML+postHtml; var blob = new Blob(['\ufeff', html], { type: 'application/msword' }); var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html); filename = filename?filename+'.doc':'document.doc'; var downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if(navigator.msSaveOrOpenBlob ){ navigator.msSaveOrOpenBlob(blob, filename); }else{ downloadLink.href = url; downloadLink.download = filename; downloadLink.click(); } document.body.removeChild(downloadLink); }  
  • Статистика пользователей

    46 176
    Всего пользователей
    3 128
    Рекорд онлайна
    argotel
    Новый пользователь
    argotel
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.



  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте, предлагаем наши услуги хостинга с защитой от DDOS и без защиты
      Мы рады предложить Вам наш хостинг argotel.ru
      Стабильность, качество, виртуальное гостеприимство – это наш конек. Используем гибкие условия, для максимального комфорта – мощные серверные процессоры, SSD диски, защита от DDOS.
      Мы предоставляем тестовый период, есть возможность moneyback.
      Подберем тарифы индивидуально под каждого, выделим IP любого количества.
      Базовое администрирование бесплатно, для каждого клиента! Защищенные тарифные планы:
      Тариф Минимальный: 1 x (2.6 GHz*), RAM 512 МБ, SSD 10 ГБ, защита от DDOS - 390 руб/м
      Тариф Стандарт: 2 x (2.6 GHz*), RAM 1024 МБ, SSD 15 ГБ, защита от DDOS - 459 руб/м
      Тариф Стандарт+: 3 x (2.6 GHz*), RAM 2048 МБ, SSD 30 ГБ, защита от DDOS - 710 руб/м
      Мощные тарифы с защитой от DDOS:
      Тариф MAX1: 4 x (2.60 GHz*), RAM 4 ГБ, SSD 120 ГБ, защита от DDOS - 1850 руб/м
      Тариф MAX2: 6 x (2.60 GHz*), RAM 6 ГБ, SSD 180 ГБ, защита от DDOS - 2499 руб/м
      Тариф MAX3: 8 x (2.60 GHz*), RAM 10 ГБ, SSD 240 ГБ, защита от DDOS - 3799 руб/м Незащищенные тарифные планы:
      Тариф Меркурий: 2 x (2.7 GHz*) , RAM 1024 МБ , SSD 30 ГБ - 349 руб/м
      Тариф Марс: 3 x (2.7 GHz*) , RAM 3072 МБ , SSD 40 ГБ - 600 руб/м
      Тариф Юпитер: 4 x (2.7 GHz*) , RAM 8192 МБ , SSD 50 ГБ - 950 руб/м
      Ссылка на тарифную сетку: прямая ссылка на тарифы Подойдет под прокси, VPN, парсинг и другие приложения. Размещение в Москве, но будете приятно удивлены сюрпризом для прокси и VPN.
      Кроме этого, дарим скидку 50% на любой сервер VPS/VDS, на первый месяц для новых клиентов.[
      Промокод: ARGOTEL-NEW Промо-акция оплати сервер VDS/VPS за 6 месяцев, получи + 6 месяцев в подарок.
      Улучшили связность в СНГ на тарифах: Меркурий, Марс, Юпитер. По необходимости, можно добавить большие подсети на сервера /24-/21
      Принимаем: Без. расчет , Яндекс, Webmoney, BTC, Paypal, Qiwi , Visa-Mastercard-Мир. Email: info@argotel.ru, Telegram: @infosaleargotel
      Сайт: https://argotel.ru
    • Если это сайт не какой-то существующей компании, у которой уже есть логотип, а сайт сам в себе, или же компания создаётся вместе с сайтом, то, мне кажется, цвета сайта ни под что можно не подгонять, а наоборот подогнать логотип под сайт. Добавить логотип в вёрстку — это же не проблема, если только у него не окажутся совсем странные размеры, типа 500x20, а там уже место под меню размечено.
    • когда начинаете тащить свой блок внутри родителя вы должны знать: координаты блока (top,left) и размеры блока (width,height) и родителя (parent_width,parent_height)
      зная эти данные вы можете вычислить left+width<=parent_width и top+height<=parent_height
      а также left>=0 и top>=0
      если left или top меньше 0, то принудительно выставляете его в 0
      аналогично для параметров больше parent_width  и parent_height
  • Лучшие авторы