Ajax анимация и загрузка
Хотел сделать колекцию анимаций загрузок для ajax приложений, но перед этим решил порыть гугл. В итоге оказалось, что смысла нет рисовать что-то новое, потому как универсального полным полно, а специфическое каждый уважающий себя дизайнер нарисует сам, для каждого проекта своё. Вот, например, существует даже генератор анимированых иконок Ajaxload.info, в колекции которого десятки анимаций и на выбор полный RGB цветов, как для фона, так и для… (задумался как перевести foreground).
Вам вопрос, уважаемые читатели, как правильно и по-русски понятно перевести слово foreground?
Вообще, что характерно, ajax не допускает использование прогресс-бара, т. е. индикатора загрузки с процентами, байтами и движущимися полосками, к каким мы привыкли используя Flash приложения. Оно вроде понятно – метод ассинхронного получения данных, позволяющего неперезагружая страницу отображать запрошенные данные для того и придуман, чтобы пользователь, нажав на кнопочку, ждал загрузки и в это время мог пользоваться сайтом дальше.
Но вот в чём загвоздка.
Пользователь не знает когда же данные эти загрузятся и загрузятся ли вообще и стоит ли ждать? В принципе, это одна из старых догм: “не пиши слово ‘загрузка’! “, которая больше применялась ко Flash приложениям. Вроде бы времена изменились и скорости увеличились и Ajax работая с текстом, должен довольно быстро получать данные. Но встречаются сервисы в которых нужно ждать даже около 10 секунд, чтобы дождаться появления содержимого. Конечно не сравниться с флэш-приложениями, которые могут загружаться по полминуты, а то и больше. Но у флэш есть индикатор загрузки. А у ajax-based приложений его нет.
Что же делать?
Ждать. Ждать пока кто-нибудь из производителей браузеров или консорциум родит концепцию расширения третьего статуса (receiving) свойства readyState, с возвращением количества байтов загруженных с сервера. Того же хотелось бы относительно загрузки картинок, а то раздражают картинки очень долго загружаемые сверху вниз. Лучше когда они показываются полностью но в плохом качестве, и по мере загрузки картинки качество улучшается. Кое-где я такое видел, но вроде это от браузера зависит? Поправьте меня.





]]>4m@t!c]]>Погугили по фразе “ajax upload progress bar” и ты узнаешь много нового. Насчет улучшения качества по мере загрузки – это атрибут Interlaced графического файла в формате gif. Опять же гугили, что бы узнать больше.
»]]>Никита]]>Я имел в виду о прогресс-баре средствами Ajax, т. е. JavaScript. А не установкой расширений для php, использвования ruby, perl и тому подобные танцы с бубном. И сравнивал с Flash, который использует свои собственные методы. Насчёт картинок, понятно, спасибо. Значит мои слова остаются в силе. Хочу браузерного решения проблемы.
»]]>Maxoud]]>Насчет картинок плохого качества: был такой аттрибут img lowsrc=”path/to/low-source-image”. Но, по-моему его нет в XHTML.
»Как вариант -
div style=”background:url(‘low/source/image’)”,
а в нем HQ img
]]>Верайс]]>foreground – передний план
пс. При написании комментария русскими буквами каждая буква дублируется! ННааппррииммеерр…
»]]>Евгений Голубев]]>Maxoud – ты не совсем прав.
По поводу изображений смотрим Википедию (РУС) по статье JPEG. Необходимую выдержку привожу ниже =)
Progressive JPEG — такой способ записи сжатого изображения в файл, при котором старшие (низкочастотные) коэффициенты находятся в начале файла. Это позволяет получить уменьшенное изображение при загрузке лишь небольшой части файла и повышать детализацию изображения по мере загрузки оставшейся части. Поэтому Progressive JPEG получил широкое распространение в Internet.
Вот и вся магия.
»]]>Никита]]>Maxoud, да действительно lowsrc очень старый атрибут, уже даже в HTML 4.01 нет. Но зато он есть в javascript как свойство этой картинки.
Верайс, точно! спасибо!
А насчёт набора русскими буквами, не замечал. Каким браузером пользуетесь?
Евгений Голубев, он прав, но только в том что сказал. ))
»Ну вот. Всё никак руки не доходили порыться, что означает галочка progressive. Теперь ясно.