05.03.2010, 20:26
|
Новичок на форуме
|
|
Регистрация: 05.03.2010
Сообщений: 8
|
|
Помогите оптимизировать скрипт смены изображений с анимацией
Здравствуйте.
Нужно было реализовать такую задачу.
Есть три ссылки, по клику на которые появляется картинка соответствующая этой ссылке (появляются с анимацией, простая смена opacity), картинки находятся друг под другом с разными z-index и смена картинки происходит с плавным перетеканием с одной в другую. Я это реализовал, на кроссбраузерность еще не проверял, но мое решение явно корявое, хочу попросить вас помощи оптимизировать его.
Вот код, я попытался его обильно продокументировать, чтобы было проще разобраться в моей писанине:
function next() {
// глобальная переменная которая хранит значение прозрачности
var opacity = 0;
// глобальная ссылка на таймер
var timer;
// Функция, которая рекурсивно вызывается для смены значение прозрачнности нужного div,
// функции передается ссылка на объект на котором сработал onclick
function changeOpacity(handler) {
// делаем анимацию с шагом 2
opacity += 2;
// блок который должен появится имеет id такой же, как и ссылка на которой сработал
// onclick + "-inf". получаю этот блок
block = document.getElementById(handler.id+"-inf").style;
// устанавливаем свойство прозрачности для ie и всех остальных
block.opacity = opacity/100;
block.filter="alpha(opacity="+opacity+")";
// создаю глобальную переменную, в которой хранится ссылка на объект на
// котором сработал onclick, чтобы я смог ей воспользоваться внутри
// анонимной функции
// !!! очень не нравится это решение
var _handler = handler;
// собственно рекурсивно через таймер выполняю ету функцию, уменьшая прозрачность
timer = setTimeout(
function(){
changeOpacity(_handler);
}, 0);
// если прозрачностьдошла до предела, очищаю таймер
if (opacity>100) {
clearTimeout(timer);
};
}
// new-vd - div элемент-контейнерв котором расположен весь этот блок с
// картинками и сслками-переключателями. Получаю его
parrentBlock = document.getElementById("new-vd");
// Проверяю отображается на верху сейчас тот объект по которому клацнули
// (чтобы не делать анимацию того объекта который сейчас виден и так),
// если нет, выполняю анимацию
// не нравится, что приходится хранить идентификатор в виде атрибута
if (parrentBlock.getAttribute("vdCur") !== this.id) {
// z-index самого верхнего элемента также хранится в атрибуте
// тоже кажется коряво, незнаю как исправить
zIndex = parseInt(parrentBlock.getAttribute("zidx")) + 1;
// увеличиваю значение атрибута zIdx на 1
parrentBlock.setAttribute("zidx", zIndex);
// устанавливаю текущим элементов, тот элемент по которому клацнули
parrentBlock.setAttribute("vdCur", this.id);
// получаю блок который буду анимировать
block = document.getElementById(this.id+"-inf").style;
// выставляю его прозрачность в 0
block.opasity = 0;
block.filter="alpha(opacity=0)";
// и помещаю его на самый верх
block.zIndex = zIndex;
// ну и анимирую, описанной выше функцией
changeOpacity(this);
}
}
Решение явно не ахти, я плохо знаком с javascript, поэтому вышло вот так. Что мне не нравится:
1. То что приходится хранить id текущего блока который наверху и его z-index в виде атрибутов
2. То что приходится передавать handler через глобальную переменную в каждой итерации рекурсивной функции (явно плохо)
Помогите мне исправить эти проблемы, и плюс если подскажите еще улучшения, буду признателен.
PS. Советовать использовать готовую библиотеку, вроде jQuery и т.п. не нужно, скрипт не большой, ради него использовать большой фреймворк нет желания (боремся за каждый килобайт так сказать )
|
|
06.03.2010, 16:06
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
А что сильные тормоза, заметны?
А смысл кому-то Вам помогать?
Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье. От кода Вашего сильно попахивает чужеродным ООП, при этом фреймворком вы пользоваться не хотите.
зы: там где борьба за каждый килобайт не место такому обилию комментариев, за ними кода не видать. Тот кто понимает язык тому комменты только мешают в таком количестве. Уберите их все вот вам и оптимизация будет
|
|
06.03.2010, 17:02
|
Новичок на форуме
|
|
Регистрация: 05.03.2010
Сообщений: 8
|
|
Сообщение от Gozar
|
А что сильные тормоза, заметны?
А смысл кому-то Вам помогать?
Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье. От кода Вашего сильно попахивает чужеродным ООП, при этом фреймворком вы пользоваться не хотите.
зы: там где борьба за каждый килобайт не место такому обилию комментариев, за ними кода не видать. Тот кто понимает язык тому комменты только мешают в таком количестве. Уберите их все вот вам и оптимизация будет
|
странный ответ. По порядку:
>>>А смысл кому-то Вам помогать?
а смысл форумов? а смысл делится опытом? я не попросил мне написать скрипт, я почитал литературу, как смог разобрался, написал то что работает... сейчас, просто, попросил помочь в улучшении кода (не производительности, а в стиле кодирования, некоторые участки кода мне кажутся корявыми)
>>>Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье.
вот именно, прошу подсказать что почитать чтобы исправить тот или иной кусок кода более лаконично и красиво
>>>От кода Вашего сильно попахивает чужеродным ООП, при этом фреймворком вы пользоваться не хотите.
не знаю чем он вам пахнет, может у вас что-то с обанянием ? что я использую к этому коду, так это только код с статьи этого сайта, как навешивать на нужные мне элементы на их события свои функции (чтобы в теле html документа не было всяких onclick и т.п.)
>>>зы: там где борьба за каждый килобайт не место такому обилию комментариев, за ними кода не видать. Тот кто понимает язык тому комменты только мешают в таком количестве. Уберите их все вот вам и оптимизация будет
во первых я специально так детально откоментировал, чтобы вам было понятно что я кодировал, у меня в коде их намного меньше.
во вторых, очевидно вы не в курсе о всяких js компрессорах, которые убирают все комментарии, переводы строк, лишние пробелы и т.д. Таким образом, для разработки используется нормальная оформленная по стандартам, с комментами версия, а для production, все это ужимается.
|
|
06.03.2010, 17:41
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Смысл форумов, ответ стандартный: http://www.phpwiki.ru/%D0%94%D0%BB%D1%8F_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD %D1%83%D0%B6%D0%B5%D0%BD_%D1%84%D0%BE%D1%80%D1%83% D0%BC
Цитата:
|
>>>Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье.
вот именно, прошу подсказать что почитать чтобы исправить тот или иной кусок кода более лаконично и красиво
|
Это что игра слов? или Вы считаете что я должен лично вам прочитать в слух что такое arguments?
http://javascript.ru/arguments
ну не попахивает, так не попахивает
Цитата:
|
во вторых, очевидно вы не в курсе о всяких js компрессорах, которые убирают все комментарии, переводы строк, лишние пробелы и т.д.
|
, а давайте сразу начнем с т.д.
и что же они такое еще делают для "ужимания" кода, кроме сокращения названия переменных?
зы: В вашем случае слишком подробная документация вредит!
лично мне ее читать лень, а во вторых код читать тяжело. Вы код пишете или роман?
|
|
06.03.2010, 18:52
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
Сообщение от Gozar
|
и что же они такое еще делают для "ужимания" кода, кроме сокращения названия переменных?
|
Переменные инлайнят, неиспользуемые куски кода удаляют, например.
|
|
06.03.2010, 19:02
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от Kolyaj
|
Переменные инлайнят, неиспользуемые куски кода удаляют, например.
|
Вопрос был адресован не всем, а еще они сносят иногда половину кода.
|
|
|
|