JQuery загружена асинхронный и готова функция не работает

Для того, чтобы оптимизировать загрузку моего документа, я использую, чтобы загрузить JQuery асинхра как этогоJQuery загружена асинхронный и готова функция не работает

<script async type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

Затем я называю сценарий с помощью JQuery:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    App.init(); 
    OwlCarousel.initOwlCarousel(); 
    FancyBox.initFancybox(); 
    StyleSwitcher.initStyleSwitcher(); 

    }); 
</script>

Он возвращает мне, что jquery не определен.

Я не знаю, что я должен использовать, хотя, несмотря на то, что эта функция будет ждать до того, как весь документ будет загружен, прежде чем вызывать его.

то же самое для библиотеки boostrap, он сообщает мне, что jquery не определен.

Я попытался загрузить сценарий в конце, но он все еще не работает должным образом.

Anykind of help будет очень благодарен.

источник

2016-05-17 Stanislas Piotrowski

Поскольку сценарий jquery загружается асинхронно, jquery не загружается в тот момент, когда выполняется ваш скрипт. Таким образом, вы должны ждать его загрузки, подписавшись на события нагрузки, как это:

<script async id="jquery" type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
Then I call a script using jquery : 

<script type="text/javascript"> 
    document.getElementById('jquery').addEventListener('load', function() { 
    App.init(); 
    OwlCarousel.initOwlCarousel(); 
    FancyBox.initFancybox(); 
    StyleSwitcher.initStyleSwitcher(); 
    }); 
</script>

Но я не знаю, почему кто-то хочет сделать что-то вроде этого.

Чтобы оптимизировать скорость загрузки страницы, лучше всего разместить весь ваш javascript в конце тела, поэтому сначала будет загружен контент, а скрипты не будут задерживать событие рендеринга страницы, если оно синхронно загружено.

источник

2016-05-17 09:35:21 Andrey

Неправильно - JS в конце тела будет загружать _start_ после загрузки содержимого, что приводит к «сверхъестественной долине»: страница выглядит загруженной, но ничего не работает до тех пор, пока JS не загрузится. Это может быть желательно в определенном контексте, но это не всегда. Между тем, '

Вопрос Script Tag - async & defer имеет хороший ответ на вашу проблему.

В двух словах вы не можете загружать jQuery или другую библиотеку асинхронно, когда какой-либо другой скрипт зависит от нее, без дополнительной асинхронной обработки для выполнения скриптов в зависимости от библиотеки.

источник

2016-05-17 09:27:50 ighea

-2

Вы использовали загрузку Async при попытке доступа к JQuery, который не загружен браузером. Вы можете получить доступ к JQuery после того, как загрузка страницы завершена.

Загрузить Jquery, как правило, для устранения вашей проблемы.

источник

2016-05-17 09:50:27 Nariman

jQuery и все компоненты, зависящие от jQuery (включая Bootstrap), зависят от подключения события DOMContentLoaded для настройки событий.

Это означает, что JQuery (и все, что использует $(function() {...})) должны быть загружены до того DOMContentLoaded пожаров, или он никогда не перехватывает свои события.

В свою очередь, это означает, что <script async ... будет ненадежным, взломанным, когда jQuery занимает больше времени для загрузки, чем содержимое страницы.

К сожалению, <script defer ...doesn't work either благодаря jQuery пытается выстрелить, как только document.readyState === "interactive".

Вы можете загрузить содержимое, а затем загрузить JQuery, поставив <script> в конце <body>, но это приведет к заметному паузы между страницей появляющейся и любым из обжига JQuery - пользователи не смогут нажать на ничего, визуальные компоненты не появятся и т. д.

источник

2017-02-23 10:49:57 Keith

Это мое решение:

<script async type="text/javascript" src="path_to_jquery" id="jquery_script_tag"> 
    </script> 

    <script> 
    if (!('jQuery' in window)) 
    { 
     window.jQueryQueue = []; 
     //define temporary jQuery function 
     window.jQuery = function(){ 
      //just save function parameters to queue 
      jQueryQueue.push(arguments); 
     } 
     document.getElementById('jquery_script_tag').addEventListener('load', function(){ 
      //call jQuery with parameters saved in queue, after it loaded 
      for (var i in jQueryQueue) 
       jQuery.apply(document, jQueryQueue[i]); 
     }); 
    } 
    </script>

Этот код определяет временную функцию JQuery, если она еще не определена. Функция сохраняет все вызовы функций jQuery в очереди, пока реальный jQuery еще не загружен (вместо вызова функции undefined jQuery). И когда jQuery загрузился, он вызывает функции jQuery в очереди с теми же параметрами, что и раньше.

источник

2017-10-18 10:49:24

Пожалуйста, объясните свое решение. Что было не так, и как вы его решили, а не просто вставляете код. –

Этот код кэширует все вызовы функции jQuery в очередь, пока jQuery не загружается (вместо вызова неопределенной функции jQuery). И когда jQuery загрузился - он вызывает jQuery с теми же параметрами, что и до –

. Ваше объяснение должно быть включено в ответ не в комментариях. Измените свой ответ и включите в него объяснения. –

Смежные вопросы