Форум

V.Shock · #1 (**permalink**) 20.04.2011, 11:41

В общем задача была такая:
Создать анимацию для галереи(возможность листать слайды при помощи кнопок "вперед" - "назад").
примерная структура структура хтмл следующая:

<body>
<div id="page">
     <div id="main">
          <div id="content">
              <div id="carousel">
              </div>
          </div>
          <div id="side-bar">
          </div>
     </div>
</div>
</body>

Сайт сверстан при помощи css3 свойств.Все 3 блока page,main,content имеют свойства скругления и тени.Блок carousel имеет свойство float:left,блок side-bar - float:right, имитируют инлайновость.

Анимация реализована в двух вариантах: самописной и jquery.animate().

Независимо от реализации Столкнулся со следующей проблемой - в Mozilla анимация жутко тормоzilla.В других браузерах анимация прокручивалась отлично.

В принципе решения были найдены - убрать с блока content,в котором находится галерея, свойства css3 и float:left.Или вынести галерею из блоков с css3 и поместить,допустим, в одтельный див в body.
Так же попробовал при помощи position:absolute спозиционировать галерею вверху экрана, т.е. вытащить ее визуально из родительских блоков.

Все это решало проблему с анимацией, но в конечном итоге породило ВОПРОС:
Пересчитывают ли браузеры (вот та же мурзила) css стили в процессе работы со страницей, из-за чего могут происходить такие тормоза в расчетах?.Собственно я пришел к выводу, что браузер пересчитывает свойства соседних элементов при применении к одному из элементов новых стилей с помощью js.Может ли кто-нибудь что-то прояснить по этому вопросу?Ничего нагуглить не удалось.

UPD: firefox portable воспроизводит без тормозов.

da_ff · #2 (**permalink**) 20.04.2011, 14:06

Размести тогда демку с обоими вариантами?

V.Shock · #3 (**permalink**) 20.04.2011, 15:17

Сообщение от da_ff

Размести тогда демку с обоими вариантами?

<html>
<head>
<style>
#carousel{
width:600px;
}
#carousel .slide-holder{
width:400px;
overflow:hidden;
height:100px
}
#carousel ul{
width:1000px;
list-style:none;
margin:0;
}
#carousel li{
width:50px;
height:100px;
float:left;
margin: 0 5px 0 5px;
}
#carousel ul a{
display:block;
height:100px;
text-indent:-9999px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script>$(document).ready(function(){$('.btn-next').click(function(){$('.slide-holder ul').animate({marginLeft:'500px'},1000,function(){this.style.marginLeft ='0px'})})})</script>
</head>
    <body>
        <div id="page">
	     <div id="main">
	          <div id="content">
	              <div id="carousel">
                        <a class="btn-prev" href="#">Previous</a>
                        <div class="slide-holder">
                            <ul>
                                <li><a href="#" style="background-color:#faa;">Item 1</a></li>
                                <li><a href="#" style="background-color:#afa;">Item 2</a></li>
                            </ul>
                        </div>
                        <a class="btn-next" href="#">Next</a>
                    </div>
	          </div>
	          <div id="side-bar">
	          </div>
	     </div>
	</div>
</body>
</html>

(Примерно так это выглядит

)
Вот точная структура, исключая остальной контент.
При попытке применить к ней jQuery анимацию, лиса выдавала не гладкую прокрутку,в отличие от оперы, а тормозящие слайды.
Выкладывать сюда весь js код или копировать стили не считаю необходимым, так как не знаю что именно вызывало такой эффект, НО почему-то удаление свойства float:left с блока content почти полностью устраняло проблему, а удаление css3 вообще снимало мельчайшие задержки анимации.Какие из свойств конфликтуют,точно я сказать не могу, и не думаю, что кто-то для меня станет разбирать сотни/тысячу строк css'a.

Вопрос заключается в том - пересчитывают ли браузеры стили каких-то элементов, кроме того, к которому обращается js?В данном случае у меня сложилось именно такое впечатление и это все объясняет.Знакомый мне верстальщик утверждает, что таблицы стилей никак не могут повлиять на анимацию и расчеты вцелом.

hogart · #4 (**permalink**) 21.04.2011, 13:22

Цитата:

Знакомый мне верстальщик утверждает, что таблицы стилей никак не могут повлиять на анимацию и расчеты вцелом.

Неправ ваш верстальщик — очень даже могут. Вот статья на эту тему: http://chikuyonok.ru/2010/11/optimization-story/

V.Shock · #5 (**permalink**) 21.04.2011, 13:30

Сообщение от hogart

... http://chikuyonok.ru/2010/11/optimization-story/

То, что нужно,благодарю.

Форум

Справочник

Discord чат

Курсы javascript