—»     —»   Динамическая подгрузка скриптов при помощи jQuery
  Раздел: Скрипты и коды   Нет комментариев  

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

Динамическая подгрузка скриптов при помощи 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() позволяет вам выбирать, будет ли производиться кэширование или нет, вам лучше использовать этот метод в тех случаях, когда ваш скрипт не изменяется.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, ajax
Опубликовал Design FactoRy   Прочитано (раз): 15682   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031