JQuery Ajax загрузка изображений с анимированным индикатором выполнения Javascript


Оглавление (нажмите, чтобы открыть):

AJAX-загрузчик файлов изображений

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Загруженные файлы на сервере будут находиться в папке uploads .

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Установка на сайт

Установка очень проста, всего лишь нужно выполнить несколько шагов:

  1. Скачайте архив с исходными файлами и распакуйте в отдельную папку на компьютере;
  2. Папку imageloader целиком закачайте на сервер сайта ;
  3. Откройте индексный файл и проверьте работу скрипта. Для корректной работы включите поддержку JavaScript в вашем браузере.

На этом можно и закончить, но, если Вам интересны детали, позволю себе несколько пояснений.

1. В файле index.html в разделе head подключаются библиотека jQuery, ajax и стили из соответствующих папок:

Здесь же находится ещё один скрипт, ответственный за загрузку изображений:

Указание расширения файлов изображений, которые можно загружать;

Файлы будут загружены в папку uploads .

2. А в разделе body расположим форму загрузки с кнопкой:

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

Вы можете открыть загруженный файл (правая кнопка мыши → открыть изображение) и рассмотреть его с действительными размерами.

Web Press

Статьи Вебмастеру

Web Press

Загрузка изображений. Jquery, PHP

Категория

Приложение

Загрузка изображений неотъемлемая часть любого веб-приложения, и веб-разработчик всегда старается сделать ее наиболее удобной для пользователя.

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

Отправка изображения на сервер, без перезагрузки документа

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

Далее необходимо создать обработчик событий на js, который будет отлавливать момент отправки формы, обрабатывать ее данные и уже посредством Ajax отправлять их (наше изображение) на сервер.

В заголовок документа после подключения библиотеки Jquery, вставим следующий js код.

Код срабатывает, когда пользователь кликает на кнопку “Загрузить”. Форма пытается отправить данные на сервер, однако наш обработчик событий отлавливает этот момент.

Скрипт считывает свойства указанные в форме (метод отправки и путь до серверного сценария). Далее используя объект FormData, подготавливается форму для отправки ее Ajax запросом. Функция, опции success, выполнится в случае успешной отправки формы и получения результата, от серверного сценария в формате json , т.к. dataType: «json» (Серверный сценарий будет рассмотрен ниже, но заранее хочу пояснить, что в результате успешной загрузки изображения, от сервера приходит путь до картинки, в переменной filelink). Далее создается новый элемент , которому присваивается путь загруженного изображения и помещается в форму. return false; в конце функции предотвращает отправку формы, а значить и перезагрузки страницы.

Серверный сценарий обработки изображений

Данные формы отсылаются на сервер, где они будут обработаны php скриптом указанным в параметре url функции $.ajax. Далее расположен базовый обработчик (код взят с сайта imperavi.com)

Индикаторы загрузки или прелоадеры

На данном этапе у нас уже готова загрузка изображения, но все, же есть неудобство т.к. пользователь не имеет визуального наблюдения за процессом загрузки.

Далее представлены два варианта прелоадера:

Статичный индикатор

Статичный, т.к. он не дает представления о количестве загруженных данных, а лишь появляется на странице в момент оправки данных на сервер, и скрывается, когда данные отправлены. В качестве индикатора можете создать gif изображение, с помощью одного из специализированных онлайн сервисов, к примеру ajaxload.info

Вставьте в форму или другое местоположение на странице html код прелоадера, в данном случае в форму добавлен блок

Также необходимо внести изменения в js скрипт, добавив методы ajaxStart и ajaxStop, соответственно код находящийся в первом будет выполняться при начале выполнения ajax запроса, второй при его остановке.

И добавить CSS стиль, скрывающий прелоадер при первоначальной загрузке документа.

Динамичный индикатор загрузки

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

HTML & CSS: Для создания простейшего “прогресс бара” нам понадобится два блока

JS: Чтобы получить информацию о количестве загруженных данных воспользуемся объектом XMLHTTPRequest. Далее представлена функция, с ее помощью можно слушать сервер для получения данных о процессе загрузки. Переменная percentComplete, рассчитывает какое количество данных уже загружено.

Совместив все вместе, получим следующий код:

По желанию, вы можете совмещать два типа прелоадера вместе.

Размер загружаемого файла

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

AJAX — загрузка файлов на сервер

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

Поговорим о сегодняшнем дне. Сегодня для более удобной загрузки изображений всё чаще используют технологию Ajax, которая позволяет загружать изображения на сервер без перезагрузки страницы. Кроме того, с помощью данной технологии стало возможным более гибко интегрировать функционал загрузки файлов на сервер с интерфейсом веб-приложений, к примеру с различными визуальными редакторами.

Мастер Йода рекомендует:  OAuth 2.0 – хороший, плохой, злой…

Для большинства веб-приложений тратить время на собственную разработку Ajax-загрузчика файлов не всегда оправдано. В этих случаях удобно использовать готовые наработки сторонних разработчиков, интегрируя их продукт со своими проектами. Здесь я решил поделиться списком популярных Ajax-загрузчиков файлов, которые возможно могли бы найти место в ваших веб-приложениях.

FancyUpload

FancyUpload является достойной альтернативой стандартного загрузчика файлов на сервер. Простое, интуитивно понятное меню, состоящее из нескольких командных кнопок. Позволяет выбрать множество файлов для загрузки, выбранные файлы выстраиваются в список очереди загрузок, это показывается визуально на форме. Процесс загрузки файлов сопровождается анимированным индикатором выполнения. Загрузчик можно произвольно стилизовать, используя CSS и XHTML. Плагин использует библиотеку MooTools, и работает во всех современных браузерах.

Uploadify

Uploadify – так же хорош, как и предыдущий загрузчик файлов, реализован на JQuery. Плагин настраивается как для единой загрузки файлов, так и для множественной. Файлы, выбранные для загрузки, выстраиваются в список. Для каждого загружаемого файла отображается анимированный индикатор выполнения загрузки файла. Интерфейс простой и ненавязчивый, командных кнопок по минимуму. Для работы так же требуется поддержка Flash. Интегрирование в проект производится довольно просто. Распространяется по лицензии GPL и MIT, это говорит о том, что плагин так же можно использовать и коммерческих продуктов.

Valum’s AJAX File Uploader v2.0

Valum’s AJAX File Uploader – Ещё один из простых но удобных загрузчиков файлов на сервер. Кому приходилось пользоваться ранее данным продуктом заметят, что проект продолжает жить. Уже теперь вторая версия, в некоторой степени доработанная. Довольно простой интерфейс, загрузка файлов, так же как и в предыдущих загрузчиках сопровождается визуальной индикацией статуса выполнения загрузки. Работает во всех современных браузерах, и не требует дополнительных библиотек для своей работы.

AJAX Multiple File Upload Form Using jQuery

Загрузчик был создан разработчиками WebDeveloper+, по всей видимости, он не планировался как отдельный проект, название у него банальное. Однако это не говорит о том, что он плох, он так же может быть полезен, как и плагины, о которых говорилось выше. Интерфейс прост, одна кнопка, посредством которой можно выбрать набор файлов для загрузки на сервер. В процессе загрузки показываются миниатюрки изображений. В блоге разработчиков есть описание по применению. Для работы плагина так же требуется библиотека JQuery.

JqUploader

JqUploader — плагин для загрузки файлов на сервер. Для работы плагин использует библиотеку JQuery. На демо-странице сайта описаны варианты настроек внешнего вида плагина, которые могут быть использованы в тех или иных случаях. Форма загрузки имеет индикатор выполнения загрузки, так же показываются проценты выполнения – об этом я не дописал в предыдущих плагинах, в некоторых из них они так же присутвуют. Визуально всё удобно и простенько. После стилизации он неплохо может вписаться в интерфейс вашего проекта.

uploadprogress

Uploadprogress плагин загрузки файлов реализованный с помощью JQuery. Пользователю предстоит выбрать несколько файлов по отдельности, затем нажать на кнопку старта загрузки файлов. Загрузка файлов сопровождается индикатором, в котором показывается скорость загрузки, скаченный объем, время до окончания.

Загрузка javascript с помощью ajax

Сказали сделать ajax , который будет подгружать js скрипт в теге, не сам файл .js , а скрипт, вставленный в страницу, и чтобы ява скрипт потом работал. Как это можно сделать? Причем библиотеки использовать нельзя.

2 ответа 2

Если я правильно понял, то необходимо исполнить чистый js код на клиенте. Тогда задача состоит из двух подзадача:

  1. Скачать скрипт с сервер
  2. Исполнить скрипт

Скачивание скрипта.

Исполнение скрипта

Обратите внимание на строчку

eval — метод исполняющий скрипт, подробнее тут

Массовая ajax-загрузка картинок на сервер с помощью jQuery

Одной из распространенных задач при разработке того или иного проекта является загрузка изображений на сайт, это могут быть фотографии в альбомы, рисунки в статьи или банальные аватарки пользователей. Давайте же решим эту задачу.

I. Проектирование базы данных

Нам понадобится две таблицы – это users и user_uploads, в первой будем хранить информацию о пользователях (id, username, password и т.д.), во вторую же будем записывать информацию о загруженных изображениях.

Ajax и PHP. Загрузка изображения на сервер

В наше время веб-сайты становятся все более интерактивными. Это касается не только специализированных сервисов, но и обычных интернет магазинов, блогов и небольших сайтов. Основной особенностью является асинхронный JavaScript и XML сокращенно AJAX. Эта технология позволяет браузеру в фоновом режиме общаться с веб-сервером и при обновлении данных, веб-страница не перезагружается полностью. Другими словами, мы можем делать запросы и получать ответы от сервера не перезагружая страницу в браузере.

Поскольку наиболее популярным языком для разработки веб-приложений является PHP, то сегодня мы будем использовать связку AJAX и PHP. Пример будет хорош для понимания основных принципов работы с AJAX и PHP.

На самом деле особых сложностей быть не должно, алгоритм действий:


  • Выбрать картинку
  • Нажать кнопку “Отправить”
  • Перехватить вызов формы с помощью JavaScript (jQuery)
  • Передать содержимое в специальный php скрипт-обработчик
  • Вернуть результат выполнения
  • Обработать результат при помощи JavaScript (jQuery)
  • Вывести пользователю информацию о загрузке

Кратко о jQuery и AJAX

Немного отклонюсь от темы и объясню что такое jQuery. jQuery — это специальная JavaScript библиотека, которая помогает упростить разработку веб приложений в несколько раз, также данная библиотека предоставляет API для работы с AJAX. Простыми словами, мы напишем меньше кода, чем если бы это делали на чистом JS.

Ajax позволяет не перезагружая веб-страницу, обмениваться данными с веб-сервером и обновлять ее содержимое.

Я склоняюсь к тому, что если есть инструмент, который позволяет вам ускорить разработку без последствий, то почему бы его не использовать? Но чистый JS тоже не помешало бы знать(хоть и лично мой уровень владения JS равен уровню копипаста примеров со stackoverflow �� ).

Мы разберем одну из проблем, которую мне однажды пришлось решать, а именно — загрузка изображения на сайт с предварительным просмотром. Если вы меняли аватарку в вконтакте, вы понимаете о чем я пишу.

Нам понадобится 3 простых файла, это:

  • Страница с формой
  • php обработчик
  • файл js

index.html

Обычная html страница с формой. Обратите внимание на enctype=»multipart/form-data» , это нужно для передачи файлов, параметр указывает на способ кодирования данных. Если передаете файлы, значение всегда должно быть multipart/form-data .

handler.php

Это очень упрощенный обработчик. Имя картинки я сгенерировал использовав функцию hash . Хорошей практикой считается изменять имена файлов при загрузке их на сервер.

ajaxupload.js

В этом скрипте происходит самое интересное. При помощи функции readImage() мы будем считывать файл с поля формы и передавать его в блок для предварительного просмотра. Создается объект FileReader . Он позволяет веб-приложению считывать содержимое файла на компьютере пользователя. Событие .onload сработает когда содержимое будет считано, при помощи этого события мы выведем изображение в блок предварительного просмотра.
И напоследок, метод .readAsDataURL() запускает процесс чтения файла, по завершению чтения будет выполнено событие .onload и картинка появится у вас на экране.

Мастер Йода рекомендует:  Взламываем Pokemon Go как нафармить 12k опыта за ночь

Функция printMessage создана для вывода информации об успешной или провалившейся попытке загрузки файла. Подробно не рассматриваем, ничего особенного не представляет.

Перехват формы и её обработка. При клике на кнопку «Отправить» событие будет перехвачено скриптом и при помощи функции .preventDefault() форма не отправит данные в index.html . .preventDefault() служит для отмены вызова каких-либо событий.

Объект FormData нужен нам для создания POST запроса к нашему скрипту, это намного проще чем вписывать каждый элемент формы в строку. Создали объект, заполнили данными, отдали в наш ajax .

Ну и собственно сам запрос AJAX. Поскольку мы используем библиотеку jQuery, составить и выполнить такой запрос не вызовет у вас никаких проблем.

Собственно, на этом и закончим. Изображение загружается, страница не перезагружается, все довольны. Если у вас возникают вопросы или предложения, пишите комментарии.

jQuery AJAX загрузка файлов на сервер

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое — что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress, то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели.

AJAX Загрузка файлов: общий пример

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега

Управляем загрузкой изображений

Дата публикации: 2013-10-18

От автора: Похоже, что загрузка изображений либо полностью упускается из вида, либо поручается излишне большим плагинам. Красивая, гладкая и быстрая загрузка сайта – важнейшая часть хорошего пользовательского впечатления, а также – элементарная вежливость по отношению к вашему дизайнеру. Кому хочется каждый раз при входе на страницу видеть свой дизайн испорченным медленной построчной загрузкой изображений?

Множество сайтов, над которыми я работаю, сильно перегружены фотографиями, и все преимущества скоростного Интернета сводятся на нет необходимостью предоставления материалов в ультравысоком разрешении retina для все возрастающего количества устройств. Это – самый подходящий момент, чтобы взять бразды правления в свои руки и начать контролировать загрузку изображений, и в этой статье я продемонстрирую вам четыре легких метода, посредством которых ваш сайт будет и замечательно смотреться, и здорово увеличит свою производительность.

Каждый раз при виде медленно загрузки изображения я вспоминаю эту классическую сцену с парнем из комикса.

1. Загрузка каждого изображения в отдельности (Single-Asset)

Это методика, которую можно применить к любому или ко всем изображениям своего сайта для предотвращения (или хотя бы скрытия) традиционной построчной загрузки базовых JPG’ов. Мы начнем с упаковки каждого изображения в div с классом img_wrapper:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Этот упаковщик предоставит нам некоторое дополнительное управление размерами наших изображений и их коэффициентом пропорциональности, чего не может гарантировать простой тэг img. Он также даст возможность применить спиннер загрузки – либо как фоновое изображение, либо как отдельный элемент – который после окончания загрузки изображения можно скрыть.

Для этого примера ограничим свое изображение коэффициентом пропорциональности 4:3 – очень важно для адаптивных сайтов. Обратите внимание, что мы также скрыли изображение с помощью opacity: 0;, что дает нам возможность управлять тем, как и когда мы его увидим при наступлении нужного момента.

Каждая картинка в DOM запускает событие load, когда все его данные загружены с сервера, а само изображение отображено браузером. Чтобы захватить и привязать это событие, нам понадобится использовать JavaScript. Я начну с добавления атрибута onload к тэгу изображения.

К сведению новичков, еще не видевших ничего подобного – это называется встроенным атрибутом скрипта, и позволяет нам привязать функциональность JavaScriptа прямиком к событиям, запускаемым из элементов DOM, что во многом сходно с добавлением стилей напрямую к элементам с помощью встроенного атрибута style. Верьте или нет, но в начале развития Веба эти встроенные атрибуты скрипта занимали значительную часть написания JavaScript’а и, подобно встроенным стилям, осуждаются в наши дни борцами за чистоту кода и семантику.

Поэтому те из вас, кто испытывает отвращение при виде встроенного JavaScriptа и уже готов пуститься наутек, пожалуйста, задержитесь и поверьте мне на слово, что это все еще единственный самый эффективный и надежный метод захвата события load изображения в DOM. Хотя я целиком и полностью выступаю за прогресс и HTML5 – я не имею совершенно ничего против применения приемов старой школы, если они элегантны и функциональны.

Альтернативой этому является индивидуальная привязка события load к каждому изображению в document ready. Однако проблема возникает, когда изображения загружаются прежде запуска document ready, и до того, как у нас появляется возможность привязать функциональность к событию загрузки каждого изображения. Отдельная проблема, когда изображения уже кэшированы браузером с предыдущей сессии, и загружаются мгновенно. Мы пропускаем событие, а наша функция не вызывается. У атрибута onload отсутствуют такие проблемы, потому что он, так сказать «предварительно привязан» к событию и поэтому обрабатывается, когда браузер анализирует HTML.

Я абсолютно не имею ничего против использования приемов старой школы, если они элегантны и функциональны.

При добавленном атрибуте onload в момент загрузки изображения будет вызываться функция imgLoaded(). Ее нужно поместить в файл javascript в head самой страницы (после jQuery, если вы его применяете в своей функции, и после любых остальных плагинов) с тем, чтобы она компилировалась до парсинга body и загрузки изображений. Если вставить функцию внизу страницы, высока вероятность того, что изображения станут грузиться до определения функции.

Мастер Йода рекомендует:  Дилемма — отвечай на интересные вопросы и вырабатывай свою точку зрения

С помощью ключевого слова this мы можем послать необработанный объект DOM изображения в свою функцию JavaScript в качестве аргумента:

Или простым JavaScript’ом:

С помощью javascriptа можно быстро пройти по DOM на один уровень вверх и добавить к содержащему элементу упаковщика класс loaded. Я уверен, вы согласитесь с тем, что это удивительно элегантное решение. Выборочно назначив этому классу стили, можно теперь показать свое загруженное изображение, установив его непрозрачность на 1:

Чтобы процесс происходил гладко, мы добавим к img несколько переходов CSS3 и добьемся при загрузке своего изображения эффекта «постепенного проявления».

Смотрите работающий пример на codepen.io, включающий альтернативную версию с отображением спиннера загрузки.

Прогрессивные JPGи

В качестве примечания к этой технике и в ответ на некоторые полученные мною к этой статье отзывы, определенно стоит упомянуть «прогрессивные» JPG’и. Это еще одна давняя методика родом из 1990-х, затрагивающая сохранение JPG’ов как «прогрессивных», а не «обычных» с целью предотвращения построчной загрузки – а вместо нее покадрово прорисовывая изображения одной высоты по мере его загрузки. Основное преимущество этого приема состоит в том, что он предотвращает «скачки» прибывающего контента по странице при загрузке изображений.

Раздражают ли такие эффекты, как спиннеры загрузки и постепенное проявление – это дело личного вкуса, но в основном прием с упаковывающим div’ом решает эти проблемы с помощью минимума CSS и JavaScript’а.

В применении техники упаковывающего div’а лучше всего то, что можно не волноваться по поводу изменения высоты изображений по мере их загрузки, а также не нужно обрекать своих пользователей на уродливое объединение пикселей в группы, что, по моему мнению, может для пользователя оказаться настолько же раздражительным, как и обычная загрузка. К тому же она ничего не стоит – процесс повторного отображения рисунка по нескольку раз на самом деле создает дополнительную нагрузку на маломощные мобильные устройства. Раздражают ли такие эффекты, как спиннеры загрузки и постепенное проявление – это дело личного вкуса, но в основном прием с упаковывающим div’ом решает эти проблемы с помощью минимума CSS и JavaScript’а, и отсутствует необходимость полагаться на пользователя (в ситуации с CMS) при сохранении JPG’ов определенным способом.

2. Пакетная загрузка нескольких изображений

Вышеописанная техника очень хороша для отдельных изображений, но как быть, если у нас есть подборка изображений, которые нужно отобразить в «карусели» или слайдшоу, или если мы пользуемся плагином разметки вроде Masonry? Обычная ошибка при использовании плагинов «карусели»/слайдера – их обработка при document ready, зачастую до загрузки всех их изображений. Это может вызвать переход слайдшоу к пустому, еще не загрузившемуся изображению, особенно если мы имеем дело с фотографиями с высоким разрешением и большим размером файла.

Для предупреждения этого явления нужно подвергать обработке предпочитаемый вами плагин только тогда, кoгда все необходимые изображения уже загрузились. Применив вариацию вышеприведенной техники, мы снова добавим атрибут onload ко всем изображениям своего слайдшоу:

NB: Нижеприведенная разметка приводится только как упрощенный примерный вариант разметки плагина слайдшоу, и должна быть адаптирована в соответствии с вашими требованиями.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Добавление индикатора загрузки в JQuery

Любой пользовательский интерфейс, даже самый примитивный, сегодня не обходится без ajax запросов. Хорошо когда запросы проходят практически мгновенно, благодаря большой скорости соединения пользователя или по другим причинам, но что делать когда запрос длится очень долго? Нужно как-то сообщить пользователю, что все хорошо, скрипт не повис, отправка данных идет, «полет нормальный». Для этого обычно отображают индикатор загрузки.

Используя JQuery.ajax очень легко отобразить и убрать индикатор загрузки когда это необходимо. Для этого существуют 2 события beforeSend и complete, на которые легко повесить соответствующее отображение индикатора. Ниже я создаю div по событию beforeSend (запрос начался) и уничтожаю его по событию complete (запрос завершен).

Но что делать, если таких запросов очень много? Вешать на каждый ajax запрос обработчики событий? Благодаря тому, что в JQuery 1.5 добавили дополнительные методы для работы с ajax, стало возможным, легко и непринужденно отобразить индикатор для всех JQuery ajax запросов выполняющийся на сайте, с помощью метода $.ajaxSetup. Просто добавляем следующий код перед началом первого ajax-запроса.

Теперь нам не нужно вешать обработчики событий на каждый вызов JQuery.ajax, этот функционал теперь «преднастроен» в каждом вызове.

2 thoughts on “ Добавление индикатора загрузки в JQuery ”

Спасибо, материал оказался весьма полезным.

AJAX и jQuery. Как загрузить скрипт JavaScript динамически? (изменения от 16.01.2012)

Если вы только начинаете изучение технологии AJAX, то рекомендую начать со статьи «AJAX и jQuery. Динамическое обновление контента. Основы». Но те, кто уже ознакомился с основами, часто обращают внимание на то, что невозможно динамически загрузить страницу, содержащую JavaScript. И интересуются, как это сделать. Способ есть и он описан в данной статье.

За один AJAX-вызов можно сделать что-то одно. Либо динамически загрузить HTML-страницу, способом, который описывался в статье выше, либо динамически загрузить JavaScript, используя jQuery-функцию .getScript().

Если нужно загрузить сначала HTML, а затем выполнить скрипт, то эти два метода можно комбинировать.

Пример №1. Загрузка обычного скрипта JavaScript динамически.

Создадим 2 файла:
example1.html — с функией вызова скрипта и script.js — непосредственно вызываемый скрипт.

Содержимое HTML-файла example1.html:

Следует обратить внимание на то, что в этом файле вызывается библиотека jQuery, а также создается пустой контейнер content и форма с кнопкой, к которой привязывается событие btnClick().

JavaScript-файл с названием script.js будет содержать функцию вывода случайного числа в контейнер content.

Запускаем файл example1.html. Убеждаемся, что пример работает.

Пример №2. Динамическая загрузка скрипта JavaScript, формируемого из PHP.

Как и в примере №1, базовая HTML-часть (файл example2.php) у нас остается практически без изменений. Изменим лишь название загружаемого файла в функции $.getScript():

Скрипт (script.php) мы немного изменяем для того, чтобы продемонстрировать то, что он на самом деле генерируется с помощью PHP. Результатом его работы также станут случайные числа в диапазоне от 1 до 100.

Запускаем файл example2.html. Убеждаемся, что пример работает.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.
3. Если вы формируете JavaScript-файл из PHP-скрипта, следует в начале PHP-файла обязательно добавить вызов функции header(), как это сделано в примере №2.

Добавить комментарий