Создание индикатора загрузки ресурсов в JQuery с использованием GIF-анимации и плагина jAni.
Для создания индикатора загрузки в качестве первого шага создадим GIF-анимашку загрузки, воспользовавшись сервисом http://ajaxload.info/.
Далее в HTML-страницу добавим блок:
<div id="dialog_wait">
<img alt="" src="/img/ajax-loader.gif">
</div>
С CSS-стилем:
#dialog_wait{
display:none;
}
В JQuery-коде при старте долгого процесса укажем:
var dialog=$('#dialog_wait');
dialog.show();
А при его успешном завершении:
var dialog=$('#dialog_wait');
dialog.hide();
Так как при отображении GIF-анимации в браузерах могут возникнуть проблемы, связанные с кэшированием и настройками браузера, для создания индикатора загрузки можно воспользоваться плагином jAni http://www.ajaxblender.com/jani.html.
Для использования плагина jAni откроем GIF-анимашку в программе Ulead GIF Animator и сохраним ее как кадры изображения.
Откроем программу Photoscape и выберем Комбинация.
Кнопкой Добавить создадим вертикальную последовательность кадров.
И кнопкой Сохранить сохраним ее.
Далее в HTML-страницу добавим блок:
<script src="/scripts/jani.js" type="text/javascript"></script>
<div id="dialog_wait">
</div>
С CSS-стилем:
#dialog_wait{
display:none;
background: url(../scripts/wait.png) no-repeat left top;
}
Где wait.png – изображение, созданное в Photoscape.
В JQuery-коде при старте долгого процесса укажем:
var dialog=$('#dialog_wait');
dialog.show();
dialog.jani({
frameWidth: 220,
frameHeight: 20,
speed: 100,
totalFrames: 10
});
dialog.jani.play();
А при его успешном завершении:
var dialog=$('#dialog_wait');
dialog.jani.stop();
dialog.hide();
Фон индикатора загрузки можно сделать прозрачным, открыв изображение wait.png в онлайн-редакторе Pixlr http://pixlr.com/editor/.
В редакторе Pixlr разблокируем задний фон изображения.
Далее волшебной палочкой выделим задний фон.
И в меню Редактировать выберем опцию Вырезать, после чего сохраним изображение в формате PNG.
