Lag de sobra em CSS3 e Jquery Cycle

[Dian Carlos 29]

Olá amigos do iMasters o/

 

Tenho um problema que a vista de alguns pode não ser um problema, mas pra mim é.

 

Estou em um projeto de site no qual eu uso box-shadow para colocar sobra em volta da div principal. Dentro dessa div tem um slide de imagens em Jquery Cycle. O problem é que, quando eu coloco sombra na div principal, o slide fica dando lag, na transição fica travando. Testei no Google Chrome e no Mozilla e os dois ficam assim. Sendo que ja tive esse problema com outros plugins Jquery relacionados a transição de imagens...

 

Por favor galera, toda ajuda será bem vinda..

 

Segue o código css que uso para a sombra..

 

Desde já agradeço a ajuda de todos..

 

Código CSS da sombra:

#principal {
width: 960px;
background: #FFF url(../img/bkg-cont.jpg) repeat-x bottom;
margin: 0 auto;
z-index: 0;
box-shadow: 0px 0px 80px 20px #000;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}

 

Código do Slide na página:

 

<div id="principal">
<div id="slide">
<div class="slide">
<img src="img/slide/slide4.jpg" width="960" height="498">
 <img src="img/slide/slide1.jpg" width="960" height="498">
 <img src="img/slide/slide2.jpg" width="960" height="498">
 <img src="img/slide/slide3.jpg" width="960" height="498">



 </div>
</div>
<div id="footer">
<img style="float: right;" src="img/arco.png" height="27"></div>

</div>

 

Script do Slide:

 

<script type="text/javascript">  
   $(document).ready(function() {  
       $('div.slide').cycle({  
	fx:'scrollRight',  
       speed:    1000, 
      timeout:  5000,
       });  
   });  

[William Bruno 1501]

Oi amigo, a princípio eu não consigo ver nenhuma relação entre o travamento e o box-shadow.

 

o css faz um repaint uma única vez. Então não tem nenhum motivo para interferir no slide.

Ainda assim, eu faria algumas correções:

 

<script type="text/javascript">  
   $(document).ready(function() {  
       $('#slide').find('div').cycle({  //diminuir o numero de elementos q o seletor vai buscar
               fx:'scrollRight',  
       speed:    1000, 
      timeout:  5000 //retirar essa virgula
       });  
   }); </script>

pois pode causar problemas no IE.

[Mateus Avila Isidoro 8]

o lag que tu fala é que o jquery escreve o plugin dentro da DOM, e a DOM é lenta. Se tiver muitos scripts na página, pode fazer o carregamento ficar um pouco travado. O ideal é usar o mínimo de plugins por página e unificar o javascript em um ou dois arquivos no máximo, para agilizar o carregamento.