JS-файлы загружаются правильно. Как?

У меня есть пара CDN файлы, которые я называю в заголовке

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

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

Я пытался использовать defer но вот та же проблема, что и в нижнем колонтитуле. Как загрузить асинхронные библиотеки JavaScript, чтобы не пробить дыру?

3 ответа

Общее решение заключается в использовании асинхронной загрузки модуля, например RequireJS. Вот пример интеграции с jQuery: http://requirejs.org/docs/jquery.html

Учитывая "но в этом случае у меня будут все скрипты сломаны, потому что они зависят от jquery". Вы можете добавить проверку в свой код JS, как:

$(document).ready(function(){
  //your jQuery-based code
})


//if jQuery loading failed
if(!window.jQuery){

}

Возможно, вы захотите взглянуть на количество файлов с одного хоста. Посмотри на это.

То, что вы хотели бы достичь, это AMD (определение асинхронного модуля)

Определение асинхронного модуля (AMD) - это спецификация JavaScript, которая определяет API для определения модулей кода и их зависимостей и загрузки их асинхронно, если это необходимо. Читать подробнее: https://en.wikipedia.org/wiki/Asynchronous_module_definition

Для этого есть несколько платформ:

Или вы можете загрузить файлы JS вручную, используя этот метод (не рекомендуется): /questions/20023721/zagruzhat-skriptyi-asinhronno/20023737#20023737

Другие вопросы по тегам