Как загрузить javascript файлы на сайт.
Рассмотрим как загрузить javascript файл с помощью JQuery. Загрузка скриптов ajax
Как загрузить javascript файлы на сайт.

Как загрузить javascript файлы на сайт.

Привет, всем! На связи Алексей Каа. Сегодня немного о технологиях jQuery и как загрузить javascript файл на сайт без задержки отрисовывания страницы.

Очень часто для ускорения загрузки страницы web-мастера используют отложенную загрузку скриптов. Это помогает значительно ускорить загрузку DOM сайта. Сегодня я хотел бы поделиться одним из вариантов подгрузки скриптов на jquery.


Загрузка javascript через jQuery ajax

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

function GetScript(url,cache) {
    $.ajax({
        type: "GET",
        url: url,
        dataType: "script",
        cache: (cache) ? true : false
    });
}

В данной функции 2 входных параметра:

  1. url - путь где лежит файл скрипта.
  2. cashe - указываем браузеру на необходимость кеширования скрипта. (для не изменяющихся скриптов.)

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

$(document).on('ready', function() {
   amt = $('.load_script'); 
   if(amt.length > 0 ){
       
       for (var i = 0; i < amt.length; i++){
           GetScript(amt[i].getAttribute('data-url'),amt[i].getAttribute('data-cache'));
       }
       
   } 
});

Смысл в том, что после загрузки страницы мы ищем элементы с классом 

.load_script

И если находим, то берем из него необходимые нам параметры url и cache. Далее вызываем нашу функцию GetScript с этими параметрами, столько раз, сколько найдено элементов с классом .load_script.

Для передачи необходимых параметров мы добавляем атрибуты в элемент.

  • data-url - это наш url
  • data-cache - это параметр кеша

На практике это может выглядеть так. Мы в ставляем в тело страницы к примеру вот такой пустой span.

<span class='load_script' data-url='js/my_script.js' data-cache="1"></span>

И теперь на этой странице будет подгружен через ajax скрипт

js/my_script.js

Единственное что необходимо учесть, так это то, что в подгруженном скрипте не будет работать событие ready, так как это событие происходит по окончанию загрузки DOM. Но так как это событие происходит раньше чем загружается наш скрипт, то необходимо использовать событие ajaxSuccess - окончание ajax запроса.

Пример:

$(document).on('ready ajaxSuccess', function() {

.......................
Исполняемый код.
......................

});

Но и при такой ситуации надо учитывать, что данное событие будет происходить при любом ajax запросе.

Как видите, загрузить javascript файл на сайт если у вас подключена библиотека jQuery довольно легко.

Удачных вам эксперементов.

jQuery1 комментарий

Поделитесь с друзьями:

  • О спасибо, как раз искал метод загрузки скриптов, без задержки DOM.

    12.12.2017 в 16:23 | ответить