подгрузка скрипта через jquery
Выполнение (запуск) скрипта после загрузки страницы на jQuery/JavaScript
Какая-либо написанная функция при загрузке вашего сайта может сработать некорректно, и случается это потому, что контент вашего сайта не успел полностью прогрузиться на стороне пользователя, как скрипт уже закончил свою работу.
Исправить это можно, если отложить выполнение скрипта до полной загрузки страницы или DOM.
Запуск скрипта после загрузки DOM (Document Object Model) на jQuery/JavaScript
Для того чтобы браузер смог отобразить страницу вашего (и не только) сайта, ему необходимо построить DOM-дерево. Формируется оно за счет получения и разбора HTML-документа.
В тот момент, когда DOM готов (медиафайлы при этом могут быть еще не загружены) мы можем начать «играть» с нашими скриптами.
В jQuery состояние готовности DOM можно определить с помощью функции ready:
Сокращенная форма записи:
Как вы могли заметить, он основан на событии DOMContentLoaded.
Запуск скрипта после полной загрузки страницы на jQuery/JavaScript
Полная загрузка страницы подразумевает под собой и готовность DOM и полную загрузку всех медиафайлов, например таких, как изображения.
Отследить этот момент в jQuery можно с помощью обработчика события load:
Аналогичный вариант на JavaScript:
Если же вы хотите помимо выполнения скрипта после загрузки страницы сделать неоднократное выполнение функции с заданным интервалом времени, воспользуйтесь этой статьей.
AJAX и jQuery. Как загрузить скрипт JavaScript динамически? (изменения от 16.01.2012)
Если вы только начинаете изучение технологии AJAX, то рекомендую начать со статьи «AJAX и jQuery. Динамическое обновление контента. Основы». Но те, кто уже ознакомился с основами, часто обращают внимание на то, что невозможно динамически загрузить страницу, содержащую JavaScript. И интересуются, как это сделать. Способ есть и он описан в данной статье.
Если нужно загрузить сначала HTML, а затем выполнить скрипт, то эти два метода можно комбинировать.
Пример №1. Загрузка обычного скрипта JavaScript динамически.
Содержимое HTML-файла example1.html:
Следует обратить внимание на то, что в этом файле вызывается библиотека jQuery, а также создается пустой контейнер content и форма с кнопкой, к которой привязывается событие btnClick().
JavaScript-файл с названием script.js будет содержать функцию вывода случайного числа в контейнер content.
Запускаем файл example1.html. Убеждаемся, что пример работает.
Пример №2. Динамическая загрузка скрипта JavaScript, формируемого из PHP.
Скрипт (script.php) мы немного изменяем для того, чтобы продемонстрировать то, что он на самом деле генерируется с помощью PHP. Результатом его работы также станут случайные числа в диапазоне от 1 до 100.
Запускаем файл example2.html. Убеждаемся, что пример работает.
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.
3. Если вы формируете JavaScript-файл из PHP-скрипта, следует в начале PHP-файла обязательно добавить вызов функции header(), как это сделано в примере №2.
Динамическая подгрузка скриптов при помощи jQuery
Зачастую, для того, чтобы ускорить работу вашего сайта, можно воспользоваться техникой под названием «ленивая загрузка», которая означает то, что вместо загрузки всей страницы полностью, браузер сначала загружает только те элементы и ресурсы, которые находятся в непосредственной видимой области.
К примеру, вы можете осуществлять ленивую загрузку картинок, необходимых для корректного отображения главной страницы сайты, и не загружать при этом картинки, которые находятся в самом низу. Ведь их можно загрузить с сервера только тогда, когда пользователь начнет прокручивать страницу.
То же самое можно применять и к другим ресурсам, будь то javascript или css. Скрипты можно загружать только по необходимости.
Раньше многие использовали такой подход в отображении комментариев в системе Disqus. После нажатия по специальной кнопки, запускался определенный фрагмент кода, который и показывал дальнейшие комментарии.
Ajax-метод обычно используется для того, чтобы делать обычные HTTP-запросы к скрипту на стороне сервера и для возврата контента скрипта. В данном случае мы совершаем GET-запрос и устанавливаем dataType на скрипт. Это сообщает jQuery о необходимости вернуть контент, будто мы включаем новый javascript-файл. Это отключит кэширование в браузере для скрипта, и добавит параметр timestamp в конце скрипта.
Если вы хотите включить кэширование скрипта, то вам нужно включить параметр cache: true.
Еще один вариант получения скрипта посредством GET ajax заключается в том, чтобы использовать метод getScript() – это просто оболочка для вышеприведенного ajax-метода.
Это позволит вам сократить объем кода, который вы используете.
Однако проблема с использованием getScript() заключается в том, что вы не сможете кэшировать скрипт, так как он всегда добавляет строку timestamp в конце javascript-файла. Так как метод ajax() позволяет вам выбирать, будет ли производиться кэширование или нет, вам лучше использовать этот метод в тех случаях, когда ваш скрипт не изменяется.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Динамическая подгрузка скриптов на jQuery
Веб-мастер, обрати внимание на скорость загрузки своего сайта, не перегружай его. Это то, на что часто закрывают глаза. Конкуренция в выдаче становится все жестче, скорость – не последний аспект, на который поисковые системы обращают внимание. Если скрипты на страницы так необходимы, то их можно загружать непосредственно в том месте, где они и необходимы, а в этом нам поможет динамическая подгрузка скриптов на jQuery. Давно на Урааа не было подобных необходимых решений.
Метод уже успели назвать в народе как «метод ленивой загрузки». Так, например, некоторые освоили загрузку изображений по скроллингу. Подгружать в нужном месте можно не только JavaScript, но и файлы стилей CSS.
В системе комментирования Disqas тоже использовался данный метод. После нажатия на кнопку, пользователю показывались остальные комментарии. Вообще, метод уже не является специфичным, это что-то вроде подгрузки материалов, о которой мы писали ранее.
Ajax-метод
С помощью Ajax можно делать простые HTTP-запросы на стороне сервера. В нашем случае запускаем обычный GET-запрос, указывая значение «script» для dataType. Так мы даем знать jQuery, что нам нужно внедрить содержимое на сайт как новый JavaSript. К тому же будет отключено кэширование, к скрипту будет добавляться timestamp при каждом запросе.
Если вы хотите включить кэширование скрипта, то вам нужно включить параметр cache: true
Метод Get Script
Второй вариант является лишь оберткой для предыдущего, это метод getScript().
Таким образом, вы можете сократить код, который используете:
У метода getScript() загвоздка в том, что вы не можете кэшировать этот скрипт, он всегда будет добавлять в конце timestamp. В зависимость от задач и от того, меняется ли содержимое вашего скрипта, выбирайте подходящий для вашего сайта метод динамической подгрузки.
Подгрузка скрипта через jquery
Загружает данные с сервера (html) и вставляет в указанный элемент.
data
Тип: Объект или Строка
Объект или строка данных, которые будут отправлены.
complete(responseText, textStatus, XMLHttpRequest)
Функция обратного действия, которая запустится после завершения запроса.
Если селектора не существует — в нашем случае, если в документе нет блока с — Ajax запрос не будет выполнен.
Функция обратного действия
Если задана функция обратного действия «complete», она будет выполнена формирования и вывода HTML. Она будет запускаться для каждого объекта коллекции jQuery.
Метод запроса
В случает использования объекта в качестве второго аргумента, то будет выполнен метод POST; в противном случае, GET.
Загрузка фрагмента страницы
Мы можем чуть исправить пример, указанный выше, чтобы извлечь только часть документа:
При выполнении, метод извлекает содержимое файла ajax/test.html, но потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Только это содержание в результате будет вставлено на страницу, всё остальное будет опущено.
Выполнение скрипта
В данном примере весь JavaScript, загруженный в элемент #a, как часть документа, будет успешно выполнен.
Однако, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:
Примеры
Пример: загружаем основную навигацию страницы в “подвал”, в виде элементов списка.
Демо:
Пример: отобразить предупреждение, если ajax запрос прошёл неудачно.
Демо:
Пример: Загрузить содержимое feeds.html в специально отведённый для этого div.
Результат:
Пример: передача массив данных на сервер.
Пример: передача данных на сервер методом POST и использование метода обратного действия.