Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 31
Да вы что! Вместо этого надо обязательно сделать два файла! JS! CSS! Чтобы было!
А автору топика советую открыть для себя заголовки cache-control, чтобы «нагрузки» на сервер не было
А автору топика советую открыть для себя заголовки cache-control, чтобы «нагрузки» на сервер не было
Нагрузка на сервер, как я написал,- не основная.
Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.
.js и .css файлы и так всегда присутствуют в проекте веб-приложения. Таким образом число действий для достижения результата (создание и редактирование анимашки) уменьшается.
Исходя из этого, для меня такое решение является интересным.
Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.
.js и .css файлы и так всегда присутствуют в проекте веб-приложения. Таким образом число действий для достижения результата (создание и редактирование анимашки) уменьшается.
Исходя из этого, для меня такое решение является интересным.
> Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.
Не надо рассказывать сказки, и перечитайте свой же пост. Можно, начиная со второго абзаца.
> Таким образом число действий для достижения результата (создание и редактирование анимашки) уменьшается.
Где они там уменьшаются? Вместо img src= писать два десятка строк на JS и CSS — это уменьшение действий? Где?
Не надо рассказывать сказки, и перечитайте свой же пост. Можно, начиная со второго абзаца.
> Таким образом число действий для достижения результата (создание и редактирование анимашки) уменьшается.
Где они там уменьшаются? Вместо img src= писать два десятка строк на JS и CSS — это уменьшение действий? Где?
> Не надо рассказывать сказки, и перечитайте свой же пост. Можно, начиная со второго абзаца.
Не понял.
> Где они там уменьшаются? Вместо img src= писать два десятка строк на JS и CSS — это уменьшение действий? Где?
Вместо img src= — div class=«loading» /div
В плане создания — нет необходимости создавать продукт совершенно другого типа — рисовать картинки.
В плане редактирования — вместо создания новой картинки, просто изменить или указать в конкретном случае новые параметры для анимации.
Не понял.
> Где они там уменьшаются? Вместо img src= писать два десятка строк на JS и CSS — это уменьшение действий? Где?
Вместо img src= — div class=«loading» /div
В плане создания — нет необходимости создавать продукт совершенно другого типа — рисовать картинки.
В плане редактирования — вместо создания новой картинки, просто изменить или указать в конкретном случае новые параметры для анимации.
> Не понял.
Это, наверное, не вы писали, агага
> Вместо img src= — div class=«loading» /div
Ага, а JS и CSS нам напишут гномики?
> В плане создания — нет необходимости создавать продукт совершенно другого типа — рисовать картинки.
Нет там никакого «продукта нового типа». Благо ajaxload.info/ позволяет об этом вообще не думать.
> В плане редактирования — вместо создания новой картинки, просто изменить или указать в конкретном случае новые параметры для анимации.
Вам часто приходится редактировать анимацию загрузки? Ну-ну
И главное все подается под таким пафосным соусом — сделать решение удобнее для себя и лучше для пользователей.
При том, что оно не удобнее и не лучше.
Я не являюсь сторонником использования графики в веб-дизайне, потому что загрузка графики создает лишнюю нагрузку на сервер, увеличивает время ожидания при открытии страницы и в первую очередь потому что эту графику нужно специально создавать отвлекаясь от основного процесса — программирования и верстки.
Это, наверное, не вы писали, агага
> Вместо img src= — div class=«loading» /div
Ага, а JS и CSS нам напишут гномики?
> В плане создания — нет необходимости создавать продукт совершенно другого типа — рисовать картинки.
Нет там никакого «продукта нового типа». Благо ajaxload.info/ позволяет об этом вообще не думать.
> В плане редактирования — вместо создания новой картинки, просто изменить или указать в конкретном случае новые параметры для анимации.
Вам часто приходится редактировать анимацию загрузки? Ну-ну
И главное все подается под таким пафосным соусом — сделать решение удобнее для себя и лучше для пользователей.
При том, что оно не удобнее и не лучше.
> Это, наверное, не вы писали, агага
Не понимаю что имеете в виду.
> Ага, а JS и CSS нам напишут гномики?
Написание css основной функции js заменяет рисование в графическом редакторе. Только в предлагаемом подходе не нужно осваивать графический редактор и переключаться от программирования и рисованию.
> Нет там никакого «продукта нового типа». Благо ajaxload.info/ позволяет об этом вообще не думать.
Я говорю не продукте нового типа, а другого типа — картинке. Указанный Вами сервис интересен, но он предлагает один из вариантов. Что если Вы хотите сделать особую анимацию?
> Вам часто приходится редактировать анимацию загрузки? Ну-ну
К примеру если в разных проектах я использую похожие анимашки, но отличающиеся общепринятых. Или в разных местах проекта они немного отличаются, например, размером.
К тому же, если хочется выделиться на общем фоне, то анимашку, представляющую из себя код, сложнее скопировать из чужого проекта, чем просто картинку.
> И главное все подается под таким пафосным соусом — сделать решение удобнее для себя и лучше для пользователей. При том, что оно не удобнее и не лучше.
Ваше мнение. Для меня, возможно, удобнее. Надо еще применить на практике, до этого руки еще не дошли.
Лучше — реально для пользователя здесь, пожалуй все-равно. Главное, что он видит, что ожидается.
Не понимаю что имеете в виду.
> Ага, а JS и CSS нам напишут гномики?
Написание css основной функции js заменяет рисование в графическом редакторе. Только в предлагаемом подходе не нужно осваивать графический редактор и переключаться от программирования и рисованию.
> Нет там никакого «продукта нового типа». Благо ajaxload.info/ позволяет об этом вообще не думать.
Я говорю не продукте нового типа, а другого типа — картинке. Указанный Вами сервис интересен, но он предлагает один из вариантов. Что если Вы хотите сделать особую анимацию?
> Вам часто приходится редактировать анимацию загрузки? Ну-ну
К примеру если в разных проектах я использую похожие анимашки, но отличающиеся общепринятых. Или в разных местах проекта они немного отличаются, например, размером.
К тому же, если хочется выделиться на общем фоне, то анимашку, представляющую из себя код, сложнее скопировать из чужого проекта, чем просто картинку.
> И главное все подается под таким пафосным соусом — сделать решение удобнее для себя и лучше для пользователей. При том, что оно не удобнее и не лучше.
Ваше мнение. Для меня, возможно, удобнее. Надо еще применить на практике, до этого руки еще не дошли.
Лучше — реально для пользователя здесь, пожалуй все-равно. Главное, что он видит, что ожидается.
> Не понимаю что имеете в виду.
В комментарии вы пишете: «Нагрузка на сервер, как я написал,- не основная.
Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.» В топике вы пишете совершенно обратное
> Написание css основной функции js заменяет рисование в графическом редакторе. Только в предлагаемом подходе не нужно осваивать графический редактор и переключаться от программирования и рисованию.
Ну да, видать на сайте графики вообще нет. Ужасужас
> Что если Вы хотите сделать особую анимацию?
Я ее сделаю в графическом редакторе. Потому что особую анимацию на JS+CSS замучаетесь делать
В комментарии вы пишете: «Нагрузка на сервер, как я написал,- не основная.
Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.» В топике вы пишете совершенно обратное
> Написание css основной функции js заменяет рисование в графическом редакторе. Только в предлагаемом подходе не нужно осваивать графический редактор и переключаться от программирования и рисованию.
Ну да, видать на сайте графики вообще нет. Ужасужас
> Что если Вы хотите сделать особую анимацию?
Я ее сделаю в графическом редакторе. Потому что особую анимацию на JS+CSS замучаетесь делать
> В топике вы пишете совершенно обратное
Это не так.
По возможности стараюсь графику не использовать вообще. Только при необходимости. Большие картинки — другое дело.
Это не так.
По возможности стараюсь графику не использовать вообще. Только при необходимости. Большие картинки — другое дело.
> Это не так.
Сравним
:-\ Комментарий говорит о том, чего в топике нет (сказки про лень и нежелание экспериментировать)
Сравним
Я не являюсь сторонником использования графики в веб-дизайне, потому что загрузка графики создает лишнюю нагрузку на сервер, увеличивает время ожидания при открытии страницы и в первую очередь потому что эту графику нужно специально создавать отвлекаясь от основного процесса — программирования и верстки.
Нагрузка на сервер, как я написал,- не основная.
Основная — лень, желание экспериментировать, сделать решение удобнее для себя и лучше для пользователей.
:-\ Комментарий говорит о том, чего в топике нет (сказки про лень и нежелание экспериментировать)
Думаю нет смысла вдаваться в логику и семантику. Просто перечитайте еще раз и сделайте вывод для себя.
Вывод я уже сделдал. Вы написали пост про то, как графика якобы грузит сервер и под пафосным лозунгом «пользователю будет лучше» предложили далеко не лучшее решение.
В комментариях вы начали юлить и рассказывать сказки про лень, нежелание экспериментировать и гибкость решения.
В комментариях вы начали юлить и рассказывать сказки про лень, нежелание экспериментировать и гибкость решения.
Вот так и возникают скрипты по полтора мегабайта, которые показывают сообщения длиной в 140 символов.
Пользуюсь этим. А по факту из проекта в проект одна и та же gif-ка. И это требует куда меньше временных затрат.
Главное распоряжаться знаниями с умом.
Подобный альтернативный подход может использоваться не только для анимации загрузки. Если в проекте предлолагается и другая графика, можно рассмотреть такой вариант.
Это аналогично использованию border-radius вместо рисования картинок. Суть в упрощении и оптимизации.
Это аналогично использованию border-radius вместо рисования картинок. Суть в упрощении и оптимизации.
Ваша анимация отжирает 10-12% моего core i5 процессора, юзайте гифы, не мучайте своих пользователей.
Так же подтормаживает местами и сбивается порядок анимации блоков (в ФФ), чего никогда не будет с гифками.
Кому интересна демка :)
jsfiddle.net/y7ns9/
Так же подтормаживает местами и сбивается порядок анимации блоков (в ФФ), чего никогда не будет с гифками.
Кому интересна демка :)
jsfiddle.net/y7ns9/
> анимация отжирает 10-12% моего core i5 процессора
Есть такое. Может можно что-то оптимизировать.
Притормаживание — полагаю, проблема браузеров? Эту анимацию тестил только в хроме. Но раньше тестил другие эффекты и анимации на jquery — притормаживание было, по крайней мере в первую итерацию. Может кто знает, как это исправить?
Спасибо за демку.
Есть такое. Может можно что-то оптимизировать.
Притормаживание — полагаю, проблема браузеров? Эту анимацию тестил только в хроме. Но раньше тестил другие эффекты и анимации на jquery — притормаживание было, по крайней мере в первую итерацию. Может кто знает, как это исправить?
Спасибо за демку.
Как вариант, можно воспользоваться GIF → Base64 конвертером и класть картинки прямиком в CSS. Правда плашки кода при этом получаются не совсем эстэтичными: cl.ly/FSUy
А если перед написанием велосипеда гуглить, то в опенсорсе можно найти прекрасные вещи: fgnass.github.com/spin.js/
С гифками тоже есть определенное неудобство.
Например, когда нужно показать прелоадер на разного цвета бэкграундах.
Полупрозрачностей в гифе нет.
Держать 4-5 одинаковых прелоадеров (но с разным цветом пикселей, которые должны смушить) тоже не есть гуд. Цвет в подложки может поменяться.
Может кто подскажет какой либо прелоадер похожий на этот но что бы вместо алиаснутых поинтов использовал бы нечто вроде +?
Например, когда нужно показать прелоадер на разного цвета бэкграундах.
Полупрозрачностей в гифе нет.
Держать 4-5 одинаковых прелоадеров (но с разным цветом пикселей, которые должны смушить) тоже не есть гуд. Цвет в подложки может поменяться.
Может кто подскажет какой либо прелоадер похожий на этот но что бы вместо алиаснутых поинтов использовал бы нечто вроде +?
Опа!
$( "#..." ).bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
$( "#..." ).bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Javascript вместо loading.gif