T.M. SoftStudio

feci quod potui, faciant meliora potentes

JQuery: Индикатор загрузки

 

Создание индикатора загрузки ресурсов в 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.