Помогите оптимизировать скрипт смены изображений с анимацией
Здравствуйте.
Нужно было реализовать такую задачу. Есть три ссылки, по клику на которые появляется картинка соответствующая этой ссылке (появляются с анимацией, простая смена 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 и т.п. не нужно, скрипт не большой, ради него использовать большой фреймворк нет желания (боремся за каждый килобайт так сказать:) ) |
А что сильные тормоза, заметны?
А смысл кому-то Вам помогать? Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье. От кода Вашего сильно попахивает чужеродным ООП, при этом фреймворком вы пользоваться не хотите. зы: там где борьба за каждый килобайт не место такому обилию комментариев, за ними кода не видать. Тот кто понимает язык тому комменты только мешают в таком количестве. Уберите их все вот вам и оптимизация будет :) |
Цитата:
>>>А смысл кому-то Вам помогать? а смысл форумов? а смысл делится опытом? я не попросил мне написать скрипт, я почитал литературу, как смог разобрался, написал то что работает... сейчас, просто, попросил помочь в улучшении кода (не производительности, а в стиле кодирования, некоторые участки кода мне кажутся корявыми) >>>Не знаете, ну так прочитайте что такое функции в js и arguments и будет Вам счастье. вот именно, прошу подсказать что почитать чтобы исправить тот или иной кусок кода более лаконично и красиво >>>От кода Вашего сильно попахивает чужеродным ООП, при этом фреймворком вы пользоваться не хотите. не знаю чем он вам пахнет, может у вас что-то с обанянием ? :) что я использую к этому коду, так это только код с статьи этого сайта, как навешивать на нужные мне элементы на их события свои функции (чтобы в теле html документа не было всяких onclick и т.п.) >>>зы: там где борьба за каждый килобайт не место такому обилию комментариев, за ними кода не видать. Тот кто понимает язык тому комменты только мешают в таком количестве. Уберите их все вот вам и оптимизация будет :) во первых я специально так детально откоментировал, чтобы вам было понятно что я кодировал, у меня в коде их намного меньше. во вторых, очевидно вы не в курсе о всяких js компрессорах, которые убирают все комментарии, переводы строк, лишние пробелы и т.д. Таким образом, для разработки используется нормальная оформленная по стандартам, с комментами версия, а для production, все это ужимается. |
Смысл форумов, ответ стандартный: 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
Цитата:
http://javascript.ru/arguments ну не попахивает, так не попахивает :) Цитата:
и что же они такое еще делают для "ужимания" кода, кроме сокращения названия переменных? зы: В вашем случае слишком подробная документация вредит! лично мне ее читать лень, а во вторых код читать тяжело. Вы код пишете или роман? |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 07:15. |