На этом шаге мы рассмотрим добавление индикатора загрузки.
Но теперь может возникнуть неприятная ситуация в медленных сетях, когда загрузка изображения занимает некоторое время. Во время загрузки изображения у пользователя может сложиться впечатление, что страница ничего не делает. Как и при загрузке заголовков новостей, мы должны показать пользователю, что выполняется некоторая операция, отображая индикатор загрузки.
В качестве индикатора будет использоваться другое одиночное изображение, которое будет отображаться в нужный момент времени:
var $waitThrobber = $('<img/>')
.attr('src', 'images/wait.gif')
.addClass('control')
.css('z-index', 4)
.hide();
В качестве этого индикатора мы будем использовать анимированное изображение в формате GIF, показанное на рисунке 1, потому что движущееся изображение укрепит пользователя в мнении, что что-то происходит.
Рис.1. Индикатор загрузки
Теперь, когда элемент уже определен, для обслуживания индикатора загрузки нам потребуется добавить всего две строки программного кода. В самом начале обработчика события click для центрального изображения перед выполнением каких-либо действий нам нужно отобразить индикатор:
$waitThrobber.appendTo(this).show();
А в начале функции performAnimation(), когда точно известно, что изображение уже загружено, мы скрываем индикатор:
$waitThrobber.hide();
Добавив индикатор загрузки, мы закончили реализацию функциональности ярлыка, отвечающего за увеличение изображения. Анимированное изображение выводится поверх левого верхнего угла изображения обложки, как показано на рисунке 2.
Рис.2. Индикатор загрузки выводится в левом верхнем углу изображения обложки
На следующем шаге мы приведем полную версию приложения.
