Шаг 217.
Библиотека jQuery. Прокрутка и перемещение. Карусель изображений. Добавление индикатора загрузки

    На этом шаге мы рассмотрим добавление индикатора загрузки.

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

    В качестве индикатора будет использоваться другое одиночное изображение, которое будет отображаться в нужный момент времени:

  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. Индикатор загрузки выводится в левом верхнем углу изображения обложки

    На следующем шаге мы приведем полную версию приложения.




Предыдущий шаг Содержание Следующий шаг