Асинхронная загрузка javascript

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript" async ></script> 

$ is not defined

Дэвид Флэнаган - JavaScript. Подробное руководство:

Оба атрибута, defer и async, сообщают броузеру, что данный сценарий не
использует метод document.write() и не генерирует содержимое документа, и что броузер может продолжать разбор и отображение документа, пока сценарий загружается.

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

Если тег <script> имеет оба атрибута, броузер, поддерживающий оба этих атрибута, отдаст предпочтение атрибуту async и проигнорирует атрибут defer.

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

Таким образом, я советую оставить все скрипты в заголовке (зачем портить код), и везде, где используется jquery, и подключению самой библиотеки прописать атрибут defer. Скрипты где jquery не используется (то есть они не зависят от подключения других скриптов) можно подключать с атрибутом async, для максимально быстрой загрузки. Отложенные скрипты (те что с defer) надо подключать начиная с jquery, чтобы не было ошибок.

Вообще лично я использую всегда defer - не блокирует загрузку и точно знаешь последовательность выполнения (также DOM модель уже загружена и не надо использовать window.onload).

У меня та же проблема на моем проекте. Народ писал, что нужно закодить последовательность загрузки скриптов в строку, где грузиться сам jquery. Читал я это на портале http://ruhighload.com/post/%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F+%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0+javascript, посвященном ускорению и масштабированию. Пока у меня стоит костыль. Сам jquery грузится сверху без асинхронной загрузки. Если у тебя нет модулей анимации, то должно все работать. Статью я постараюсь найти.Может кто из гуру JS подскажет, как найти эти функции.Но как я понял, тебе нужно найти функции, которые используют $ и заставить их ждать Jquery. Ну а пока вот мой стиль подключения:

<script src="//wob.su/design/assets/js/jquery.min.js"></script>
    <script>
$(document).ready(function() {
    $("head").append("<link href='//wob.su/design/assets/css/green.css' rel='stylesheet' title='Color' >");
    $("head").append("<link href='//wob.su/design/assets/css/owl.carousel.css' rel='stylesheet' >");
    $("head").append("<link href='//wob.su/design/assets/css/owl.transitions.css' rel='stylesheet' >");
    $("head").append("<link href='//wob.su/design/assets/css/animate.min.css' rel='stylesheet' >");
    $("head").append("<link href='//wob.su/design/assets/fonts/fontello.css' rel='stylesheet' />");
});

</script> </script>

    <script src="//wob.su/design/assets/js/jquery.easing.1.3.min.js" async></script>
    <script src="//wob.su/design/assets/js/bootstrap.min.js"></script>
    <script src="//wob.su/design/assets/js/bootstrap-hover-dropdown.min.js" async></script>
    <script src="//wob.su/design/assets/js/skrollr.min.js" async></script>
    <script src="//wob.su/design/assets/js/skrollr.stylesheets.min.js" async></script>
    <script src="//wob.su/design/assets/js/waypoints.min.js" ></script>
    <script src="//wob.su/design/assets/js/waypoints-sticky.min.js" ></script>
    <script src="//wob.su/design/assets/js/owl.carousel.min.js" ></script>
    <script src="//wob.su/design/assets/js/jquery.isotope.min.js" ></script>
    <script src="//wob.su/design/assets/js/jquery.easytabs.min.js" ></script>
    <script src="//wob.su/design/assets/js/viewport-units-buggyfill.js" ></script>
    <script src="//wob.su/design/assets/js/scripts.js" async></script>