Как сделать двигающийся аплоадер минимального размера и красиво

[mrkto]

Дема чё-то не пашет.

А по нормальному - это делается анимированной гифкой в ImageReady, и не по пикселю а по 5-10.

[fuksito]

Анимированый гиф будет весить как 20 картинок, а тут один jpg

[hooz]

а как быть с нагрузкой на брауeзер лишним js?

[fuksito]

предположим что эту картинку вы используете в сайте где уже прописана библиотека.

[hooz]

ну если только в таком случае а так я не вижу смысла нагружать страницу разрозненными скриптами (это сугубо моё мнение и не факт что это правильно!)

[hooz]

вот и я о том

[WarGasm]

Есть такой замечательный сервис как http://www.ajaxload.info/ Он генерирует гифки средним размером в 10 кб.

Я думаю этим размером можно пренебречь, учитывая что лоад-бар грузится только по нажатию кнопки или ссылки. При загрузке страницы роли не сыграет никакой, зато нагрузки на браузер меньше. К тому же как быть если у пользователя отключены картинки? В случае с гифкой все решит alt="" а в вашем случае пользователь не поймет идет ли процесс или нет.

[BOPOH]

Вот из за таких пользователей мы и получаем огромный странице вес которых не оправдан

[foo]

ff3, linux, в демо никакого движения нет.

И советую поработать над орфографией и пунктуацией. Особенно "юзаеться" режет глаза. Извините, если задеваю :)

[fuksito]

Та нет, я просто думал всем это будет понятно я програмистам слово юзаеться резать глаз не будет)

А вы на кнопку старт нажимали?

[foo]

Грамотность приветствуется даже среди программистов. вы же пишите для громадного сообщества, а не в чате. Уделите 5 минут работе над ошибками, вам лишний раз скажут спасибо.

Нажимал, конечно. Никакой реакции, карсный фон панельки только.

[foo]

Заработало. )

[Karakteristika]

Режет глаза не сленг, а ошибка в написании слова.

[Ecugool]

ff3, linux, есть движение, причем вполне отчетливое-)

[foo]

вы остальные комментарии принципиально не читаете?

[fuksito]

А да, я же поменял название папки со scripts на src в ссылке потому что хабр на scripts ругался. исправил пути, смотрите.

[takkmoil]

Fx3/Vista — демо не работает.
Если уж «юзать», то «юзается», без мягкого знака.

[Over]

А зачем для такой мелочи стокилобайтный фреймворк использовать?

[fuksito]

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

[fuksito]

Можно. Просто двигайте бекграунд на 1 пиксель в интервале.

[Zibx]

Конечно можно, только искать через getElementById. И ксс по-другому использовать.

[XAMelleOH]

Было уже на хабре - Выбрасываем Flash, кочегарим Javascript: Анимация. (Урок) - обширное описание со сдвигающимся бекграундом и чистым js.

[dandelion]

тридцатикилобайтный, а если постараться, то шестнадцатикилобайтный

[kossnocorp]

Хороший пример в канди стайл ;). Просто и со вкусом.

[fuksito]

Реально гифом больше мороки)

[darchik]

Прикольно :)

[fuksito]

Да и гифом управлять нельзя, а тут можно увеличиать либо уменьшать скорость изменяя время интервала.

[simpel]

Считаю, что для конкретной задачи .gif лучше.
http://350d.ru/progress.html

8кб gif, никаких заморочек с JS, тормозами и фликами в IE.

[fuksito]

А ну ка остановите прокрутку или увеличте скорость движения динамически

[simpel]

а зачем?

"A ну ка" отключите JS в браузере.

можно в одном гифе объединить все состояния, и замена класса у эелемента будет выглядеть логичнее чем такие заморочки с JS

[fuksito]

Это еще не заморочки совсем. Просто мне так больше нравиться, это как один из вариантов я не утверждаю что правильней.
Отключив js вы стиль тоже поменять несможете ксати)

[glazs]

без JS вы не пошевелите этим прогресс баром вообще, не гоните пургу.

[bO_oblik]

Можно так сделать.

Два класса:

.progress {
background:url(анимированный_гиф.gif) left top repeat-x;
}

.stop {
background:url(тот_же_гиф_без_анимации.gif) left top repeat-x;
}

Для остановки просто подменить класс. Для ускорения можно так же сделать, но ускорение не особо нужная функция.

[bO_oblik]

Ой. Случайно повторил мысль выше.

[fuksito]

Да можно. И действительно ускорение не очень нужное. но бывает и пригодиться как и большиство еффектов не нужно до определенного времени.
Кстати это у вас уже начинаютсья заморочки с гифом, вот сделайте еще гиф который будет это дело назад крутить, еще ода картинка. снова рисовать, а в яваскрипте нужно изменить операцию плюсования на минусование и двигать бекграун назад, или влево или вправо или вообще в бок :-)

[FloppyFormator]

Зато в гифе можно ещё растягивать, вращать и применять другие ортогональные и эрмитовы преобразования.

[fuksito]

и еще вам прийдеться позаботиться чтобы эта картинка предварительно загрузилась перед тем как менять клас, нито будет некрасивый переход.

[fuksito]

И весит файлик 1.8кб

[hooz]

да, да, полностью согласен. я к сожалению по своей хронической невнимательности не заметил заюзаный фреймворк в таком случае все даже логично и даже очень интересное решение. СПС за идею буду думать над применением.

[Baur]

Может поместите материал в какой-нибудь блог, дабы потом можно было найти? :-)

[glazs]

понабежало на хабр джедаев веб-разработки в последнее время.
вас только за использование тега center по рукам набить надо, не то что за статью про ипользование jQuery там, где без него код на чистом JS написать нисколько не проблематично.

[dimaniko]

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

Вобщем, ткнулся в код веб-дев-тулом - а стрелка-то и не картинка вовсе. Таблица с ячейками в пиксель площадью, восемнадцать tr по восемнадцать td, что ли, у каждой фон задан.

А вы говорите жипег жабаскриптом скроллится. Ежели кодеру ограничения четко не задать он и не то нафантазирует.

[FloppyFormator]

Обалденно. Это ж сколько выкурить надо для такого?

[mrkto]

---(ОТВЕЧАЮ СРАЗУ НЕСКОЛЬКИМ, Т.К. МОГУ КОММЕНТИТЬ ТОЛЬКО РАЗ В 5 МИНУТ)---

Пару Kb - огромный вес? Gif-ка может быть достаточно оптимизирована. Напр. делал 100x100 эффект огня - всего 13 Kb.

В каком веке вы живёте? И как насчёт нагрузки на процессор – сдвиг по пикселю, блин (а если длина полоски 400px).

А как насчёт совместимости без JS??? Для меня это гораздо важнее, чем экономия 0.5 сек. пользователя.

К тому же, есть достаточно много стандартных полос – и что, тратить время на редактирование, добавление JS??

[fuksito]

А тратить время на рисование гифа. Кстати сколько будет весить такая гифка http://habrahabr.ru/blog/webdev/37871.ht… очень интерестно.

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

ну и вы сами себе противоречете говоря про век. По крайней мере у меня на самом типичном компьютере все рисуетсья без тормозов.

[Anarki]

Вот у меня от 50 вкладок открыто, если каждый считает своим долгом сделать сайт под вебдваноль и заюзать огромные фреймворки, то я нафиг отключаю JS. Ибо скоро уже под JS нужно будет еще одно ядро CPU, про память молчу.

[fuksito]

Ну тогда сами виноваты, уверен что вам и половина закладок из 50 не нужна.

[mrkto]

Каждой задаче своё решение.

jQuery для элемента вёрстки... я пАдСтолом!

Вообще, сейчас тенденция отказа от этих полосок, т.к. они часто занимают больше времени у пользователя (в т.ч. на рендеринг), чем сам процесс загрузки.

[fuksito]

У меня эта полоска используеться не для предзагрузчика, а для аплоадера файлов когда уже все загрузилось. Проверьте сами http://muslib.net/ залив песенку mp3

[Kolyaj]

>Во вторых библиотека jQuery позволяет говорить что поведение полоски будет одинаковое во всех браузерах.
Библиотека jQuery в данном случае говорит лишь о том, что вы не знаете толком JavaScript. Без нее функция будет практически та же самая (хотя можно и короче), а работать будет быстрее.

[DeadLy]

поведение полоски будет одинаковое во всех браузерах.

не-а, у меня например в Опере медленней движется в ФФ быстрее =)

[fuksito]

В опере кстати красивее выходит, плавнее намного, она как-то лучше с этим справляеться.

[CuamckuyKot]

Согласен с комментариями. Если вы сделаете анимированный гиф - он не будет весить в 20 раз больше, потому что там одна картинка будет двигаться на 5 пискелей. Картинка такая весила 4Кб всего. Обходится дешевле, чем гонение гифа ява-скриптом.

[simpel]

В данном случае, вы забиваете микроскопом сами знаете что.

[Kozlodoev]

извините, но такое лучше делать анимированным гифом, как и говорят выше.

[fuksito]

Для тех кто боиться за процесор: можно двигать и не попиксельно как я, а по 5 пикселей как предлагаете в гифке, хоть по 10 просто анимация будет не такая плавная, а я хотел добиться эффекта "это что - флеш?"

[Tvarb]

Господы, вы тут спорите про байты а у для такого мизерного эфекта, который достигается анимированным гифов используется целую библиотеку.

И не надо говорить про увелечение - уменьшение скорости анимации. Это все от лукавого - скорость загрузкт того, перед чем этот прелоадер, она не меняет.

Давайте использовать вещи по назначению ...


Фреймоврк в не умелых руках вешает браузер только в путь :)

[fuksito]

Остальные комментарии принципиально не читаем ?

[DriverX]

Бессмысленно =/