На этом шаге мы рассмотрим добавление изображения индикатора загрузки.
Перемещение удаленного файла может потребовать некоторого времени, продолжительность которого зависит от ряда факторов, поэтому мы должны сообщить пользователю о том, что идет процесс загрузки. Для этого до отправки запроса AJAX мы добавим в страницу изображение индикатора загрузки.
var $loadingIndicator = $('<img/>')
.attr({
'src': 'images/loading.gif',
'alt': 'Загрузка. Подождите, пожалуйста.'
})
.addClass('news-wait')
.appendTo($container);
Затем в первой строке функции обратного вызова, передаваемой методу $.get(), которая обрабатывает успешное завершение запроса, мы сможем удалить изображение из страницы простой командой:
$loadingIndicator.remove();
Теперь, если после начальной загрузки страницы при получении заголовков новостей возникнет задержка, вместо пустой области мы уви дим изображение индикатора загрузки, как показано на рисунке 1.
Рис.1. Если при получении заголовков новостей возникнет задержка, мы увидим индикатор загрузки
Полный текст этого примера можно взять здесь.Это анимированное изображение GIF, которое будет вращаться в окне браузера, показывая, что выполняется некоторое действие.
Примечание. Мы легко можем создавать новые анимированные изображения GIF для применения в качестве индикаторов загрузки AJAX, воспользовавшись службой http://ajaxload.info/.
К сожалению, на момент публикации этого шага, нам не удалось запустить приведенный здесь скрипт. В тексте самого скрипта ошибок нет. Похоже, что на хостинге действительно запрещено использование функции file_get_contents() языка РНР, а библиотека cURL не установлена. Мы работаем над устранением этой проблемы.
На следующем шаге мы рассмотрим эффект изменения прозрачности по высоте.
