Stanislas Piotrowski Stanislas Piotrowski - 6 months ago 94
Javascript Question

jquery loaded async and ready function not working

In order to optimize the load of my document, I use to load jquery async like that

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


Then I call a script using jquery :

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

});
</script>


It returns me that jquery is not defined.

I don't know what should I use, I though that .readyfunction would wait untill all document is loaded before calling it.

the same for boostrap library, It tells me that jquery is not defined.

I've tried to ask the script to be loaded at the end, but it still does not work properly.

Anykind of help will be much appreciated.

Answer

Since jquery script is loaded asynchronously, jquery is not loaded on the moment your script is executing. So you need to wait for it to load by subscribing on load event like this:

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

But I don't know why someone want to do thinks like this.

To optimize page loading speed it is better to put all you javascript at the end of the body, so content will be loaded first, and scripts won't delay page rendering event if it's synchronously loaded.