Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 74
Спасибо за статью, как раз то что мне нужно в моих ненаучных исследованиях!
Небольшой оффтоп: подскажите чем код красили )
Небольшой оффтоп: подскажите чем код красили )
К сожалению некоторые браузеры сводят все труды на нет. И на данный момент проще действительно нарисовать gif.
«Некоторые» браузеры многие труды сводят на нет. Я к примеру безболезненно использую этот код в интрасети, где не пускаю в систему из «некоторых» браузеров
Довольно жестко. =)
В интрасети не должно быть так много уделено внимания дизайну, чем Вам не понравились гифки с прозрачным фоном?
Ну интрасеть это наверное грубо сказано, не думаю что нужно вдаваться в подробности.
Почему невозможно использовать гифки прозрачные я писал ниже
Почему невозможно использовать гифки прозрачные я писал ниже
Дело в том, что по ссылке с примером у Вас довольно таки квадратный и некрасивые индикатор. Гифки с прозрачным фоном такие убогие, потому что в них все время пытаются вставить либо тень, либо градиентик. Если взять цвета 4-6 и сделать лоадер с прозрачным фоном, он не будет мерцать белым по краям полосок. Будет довольно таки симпатичный индикатор. Мне так кажется =)
К сожалению, в более-менее крупных приложениях, как правило, стоит проблема большого количества подключенных библиотек, которые начинают долго грузиться, заставляют браузер больше думать и т.д. Это незаметно на 1-2-3 библиотеках, но когда грузится jQuery, 3-4 плагина, какой-нибудь lightbox и т.д. — уже очень даже заметно.
Поэтому проще, дешевле, быстрее — взять на борт простой, маленький и понятный гиф файл, чем брать еще одну большую и непонятную библиотеку.
Поэтому проще, дешевле, быстрее — взять на борт простой, маленький и понятный гиф файл, чем брать еще одну большую и непонятную библиотеку.
В таких случаях сокращается количество запросов за счет объединения подключаемых скриптов и стилей. Один раз все это грузится и потом из кэша берется.
Безусловно, это само собой разумеется.
Однако больше скриптов => больше вопросов с их совместимостью, больше усилий по тестированию в разных браузерах, больше знаний надо иметь разработчикам обо внутреннем устройстве. Ниже, например, показано что в IE8 не работает — это ведь все надо тестировать!
А ради чего? В сети миллионы гифок и есть даже сервисы по их генерации — круглых, квадратных, каких угодно цветов и размеров. Без усложнения проекта, без необходимости тестирования — просто скачать гифку.
Однако больше скриптов => больше вопросов с их совместимостью, больше усилий по тестированию в разных браузерах, больше знаний надо иметь разработчикам обо внутреннем устройстве. Ниже, например, показано что в IE8 не работает — это ведь все надо тестировать!
А ради чего? В сети миллионы гифок и есть даже сервисы по их генерации — круглых, квадратных, каких угодно цветов и размеров. Без усложнения проекта, без необходимости тестирования — просто скачать гифку.
Ваше полное право использовать canvas или нет :-) Однако, есть более серьезный минус моего решения, как уже отметили ниже — это нагрузка на ЦП.
В некоторых случаях, как например в моем, где нужно вешать индикатор на кнопку с градиентом — это хорошее решение.
В некоторых случаях, как например в моем, где нужно вешать индикатор на кнопку с градиентом — это хорошее решение.
Запустил демо страницу с лоадерами на дохленьком нетбуке, немного напрягает тот факт, что при единственной открытой в браузере (firefix 3.6.13) странице, загрузка ЦП скачет 5-15%. С гифкой она как-то всё-таки в районе нуля
В IE8 только у меня не работает?
У меня тоже самое в IE8
А в IE8 есть канвас?
В IE есть VML и при желании можно сделать всё кроссбраузерно. Например можно использовать Raphael JS.
А при чем Рафаель к Канвасу?
К тому что тоже самое можно было сделать на Raphael JS (SVG / VML) и охватить все браузеры.
В фоксе отъедает 20% проца один индикатор. Решение в топике — 5%, но ведь его можно кешировать и тогда вообще работать будет как родной. А свг кешируется? Он слишком тормоз =(
Может все-таки excanvas?
«Делать специальный GIF под каждую ситуацию довольно глупо» ну это вы загнули. Прямо таки вы самый умный, а все остальные дураки? Очень и очень многие успешные проекты используют GIF и ничего плохого или глупого в этом ничего нет
Еще можно написать свой серверный генератор гифов на все случаи жизни:
/ajax-loader.gif?bars=11&radius=4&size=2,5&rgb=255,255,255&fps=10
И генерить вручную ничего не нужно, и браузер не нагружает.
/ajax-loader.gif?bars=11&radius=4&size=2,5&rgb=255,255,255&fps=10
И генерить вручную ничего не нужно, и браузер не нагружает.
— так выглядит празрачный генерированный gif, правда если фон однотонный, то можно просто прописывать бекграунд, а как быть если бекграунд очень спецэфичен?Плохой генератор?
первый который выдал гугл, я признаться не знаю тонкостей gif формата, можно добиться идеальной прозрачности, чтобы индикатор на любой поверхности смотрелся правильно?
Нет, от гифа нельзя добиться. Я как-то пропустил тот факт, что фон может быть градиентный.
Я бы и не парился, если бы кнопка не была такой :-)
Можно сделать спрайт с PNG-24. Это и экономия времени и более кроссбраузерно.
Только если не нужен IE6.
Вы это к чему? Описанный способ не работает также в IE7 и IE8.
Можно сделать спрайт с PNG-24. Это и экономия времени и более кроссбраузерно.
Я к этому.
IE7++ нормально понимает png-24, для IE6 нужен фильтр. В случае со спрайтами его применить нельзя.
Я к этому.
IE7++ нормально понимает png-24, для IE6 нужен фильтр. В случае со спрайтами его применить нельзя.
В случае со спрайтами его применить нельзя.Можно. Только уметь надо. Но даже если и так, IE7 + IE8 это уже более кроссбраузерно чем сейчас.
Это и экономия времени и более кроссбраузерно.
Можно. Только уметь надо.
Пожалуйста, поделитесь способом. Насколько я знаю можно задавать только crop и scale. В случае со спрайтами это не пройдет.
Пожалуйста, поделитесь способом. Насколько я знаю можно задавать только crop и scale. В случае со спрайтами это не пройдет.
Способ даже не один:
1. CSS — clip.
2. Двигать не background, а объект внутри другого с overflow:hidden.
1. CSS — clip.
2. Двигать не background, а объект внутри другого с overflow:hidden.
Навреное, можно использовать обычный img + crop.
Гиф, в отличие от пнг, не пожжерживает альфаканал. В гифе пиксель может быть либо на 100% прозрачный, либо на 100% же залитый цветом. Если фон однотонный, можно сгенерировать гифку так, чтобы она по краям сглаживалась в нужный цвет. Если фон сложный — смотреться будет уродливо.
Собственно, опытный дизайнер все эти нюансы знает и аякс-крутилку поверх градиентов не рисует.
Еще, в принципе, можно просто поставить канвас и забить на пользователей ущербных браузеров. В конце концов это необязательный дизайнерский элемент — переживут.
Собственно, опытный дизайнер все эти нюансы знает и аякс-крутилку поверх градиентов не рисует.
Еще, в принципе, можно просто поставить канвас и забить на пользователей ущербных браузеров. В конце концов это необязательный дизайнерский элемент — переживут.
Вот если бы apng поддержали браузеры кроме Firefox'а, то можно было анимацию и на градиенты ставить — people.mozilla.com/~dolske/apng/demo.html (смотреть в Firefox'е).
Ну а иначе лучше использовать svg + smil.
Ну а иначе лучше использовать svg + smil.
> я жду вас под катом!
У данной проблемы с ходу могу предложить два универсальных решения:
1) Рисуем в виде с прозрачным фоном PNG ленту кадров. Дальше юзаем CSS sprite для смены кадра.
2) Рисуем только один кадр, который также сохраняем в PNG с прозрачным фоном и юзаем JS для поворота рисунка на угол.
1) Рисуем в виде с прозрачным фоном PNG ленту кадров. Дальше юзаем CSS sprite для смены кадра.
2) Рисуем только один кадр, который также сохраняем в PNG с прозрачным фоном и юзаем JS для поворота рисунка на угол.
Утром проснулся с мыслью о втором варианте :-) Нужно будет попробовать реализовать.
Когда HTML5 получит повсеместное использование, можно будет делать еще проще — брать DIV`ы нужного размера с CSS закруглением. CSS-кой поворачивать их на нужный угл и устанавливать прозрачность.
Пока-что такой вариант не очень резонный из-за достаточно большой аудитории пользователейIE старых браузеров, а прикручивание костылей для совместимости с HTML5 добавит дополнительный трафик(
Пока-что такой вариант не очень резонный из-за достаточно большой аудитории пользователей
Или просто использовать SVG. Который, кстати, уже сейчас более распространён, чем CSS-трансформации.
Ребята, вы чего? Activity Indicator был придуман уже давно, а вы всё извращениями занимаетесь.
если во всём проекте используется только один тип изображений, то проще GIF. т.к. 1 GIF такая весит чуть меньше чем скрип. Да и к тому же зачем создавать лишнюю нагрузку на браузер.
при нажатии на кнопку, внутри неё появился этот самый индикаторВот это мне кажется странным. Если появляется внутри кнопки, то раздвигает её, или место должно резервироваться заранее.
Все чаще вместо спиннеров вижу что-то подобное:
Да даже на хабре полоски по кнопке ползут.
Идея занятная. Но ведь canvas не будет работать почти ровно там-же, где не будут работать анимированные png с полным alpha-каналом.
Правда apng тоже тема еще та — софта для их заготовки не густо.
Правда apng тоже тема еще та — софта для их заготовки не густо.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Canvas Indicator — альтернатива для AjaxLoad.gif