Динамическая подгрузка скриптов на jQuery

02015-09-1438181Денис Абдуллин

Веб-мастер, обрати внимание на скорость загрузки своего сайта, не перегружай его. Это то, на что часто закрывают глаза. Конкуренция в выдаче становится все жестче, скорость – не последний аспект, на который поисковые системы обращают внимание. Если скрипты на страницы так необходимы, то их можно загружать непосредственно в том месте, где они и необходимы, а в этом нам поможет динамическая подгрузка скриптов на jQuery. Давно на Урааа не было подобных необходимых решений.

Метод уже успели назвать в народе как «метод ленивой загрузки». Так, например, некоторые освоили загрузку изображений по скроллингу. Подгружать в нужном месте можно не только JavaScript, но и файлы стилей CSS.

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

Ajax-метод

С помощью Ajax можно делать простые HTTP-запросы на стороне сервера. В нашем случае запускаем обычный GET-запрос, указывая значение «script» для dataType. Так мы даем знать jQuery, что нам нужно внедрить содержимое на сайт как новый JavaSript. К тому же будет отключено кэширование, к скрипту будет добавляться timestamp при каждом запросе.

Если вы хотите включить кэширование скрипта, то вам нужно включить параметр cache: true

Код

$.ajax({
  type: "GET",
  url: "http:https://yraaa.ru/js/scripts.js",
  dataType: "script",
  cache: true
});

Метод Get Script

Второй вариант является лишь оберткой для предыдущего, это метод getScript().

Код

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Таким образом, вы можете сократить код, который используете:

Код

$.getScript( "http:https://yraaa.ru/js/scripts.js" )
  .done(function( script, textStatus ) {
  alert('Скрипт успешно загружен');
  })
  .fail(function( jqxhr, settings, exception ) {
  alert('Ошибка подгрузки файла скрипта');
});

У метода getScript() загвоздка в том, что вы не можете кэшировать этот скрипт, он всегда будет добавлять в конце timestamp. В зависимость от задач и от того, меняется ли содержимое вашего скрипта, выбирайте подходящий для вашего сайта метод динамической подгрузки.