DataLife Engine > Версия для печати > Динамическая подгрузка скриптов при помощи jQuery

Зачастую, для того, чтобы ускорить работу вашего сайта, можно воспользоваться техникой под названием «ленивая загрузка», которая означает то, что вместо загрузки всей страницы полностью, браузер сначала загружает только те элементы и ресурсы, которые находятся в непосредственной видимой области.К примеру, вы можете осуществлять ленивую загрузку картинок, необходимых для корректного отображения главной страницы сайты, и не загружать при этом картинки, которые находятся в самом низу. Ведь их можно загрузить с сервера только тогда, когда пользователь начнет прокручивать страницу.То же самое можно применять и к другим ресурсам, будь то javascript или css. Скрипты можно загружать только по необходимости.Раньше многие использовали такой подход в отображении комментариев в системе Disqus. После нажатия по специальной кнопки, запускался определенный фрагмент кода, который и показывал дальнейшие комментарии.

$j=jQuery.noConflict();

$j(document).ready(function() {
        $j('.showDisqus').on('click', function(){   // click event of the show comments button
                var disqus_shortname = 'enter_your_disqus_user_name';  // Enter your disqus user name

                // ajax request to load the disqus javascript
                $j.ajax({
                 type: "GET",
                 url: "http://" + disqus_shortname + ".disqus.com/embed.js",
                 dataType: "script",
                 cache: true
             });

                $j(this).fadeOut();  // remove the show comments button
        });
});

Ajax-метод

Как видно в вышеприведенном коде, у нас имеется событие click, привязанное к кнопке .showDisqus, и внутри него мы используем jQuery-метод .ajax(), который совершает GET-запрос скрипта встраивания Disqus в ваше приложение.

Ajax-метод обычно используется для того, чтобы делать обычные HTTP-запросы к скрипту на стороне сервера и для возврата контента скрипта. В данном случае мы совершаем GET-запрос и устанавливаем dataType на скрипт. Это сообщает jQuery о необходимости вернуть контент, будто мы включаем новый javascript-файл. Это отключит кэширование в браузере для скрипта, и добавит параметр timestamp в конце скрипта.Если вы хотите включить кэширование скрипта, то вам нужно включить параметр cache: true.

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

Метод Get Script

Еще один вариант получения скрипта посредством GET ajax заключается в том, чтобы использовать метод getScript() – это просто оболочка для вышеприведенного ajax-метода.

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

Это позволит вам сократить объем кода, который вы используете.

$.getScript( "http://test_script.js" )
  .done(function( script, textStatus ) {
    alert('Successfully loaded script');
  })
  .fail(function( jqxhr, settings, exception ) {
    alert('Failed to load script');
});

Однако проблема с использованием getScript() заключается в том, что вы не сможете кэшировать скрипт, так как он всегда добавляет строку timestamp в конце javascript-файла. Так как метод ajax() позволяет вам выбирать, будет ли производиться кэширование или нет, вам лучше использовать этот метод в тех случаях, когда ваш скрипт не изменяется.

Вернуться назад

Техно-мир