[Resolvido] Site muito pesado por causa do JQuery

Buthy · Junho 10, 2011

Queria que vcs dessem uma olhada:

http://www.grupodeixestar.com.br/index.php

nos menus: home, biografia, agenda

Quando é clicado de um pro outro, e de dentro das seções, o site da uma travada e só após alguns segundos que volta com a seção já carregada...

Eu tenho todas as funções, arquivos js e css chamados no index.php:

<link rel="stylesheet" href="css/nivo-slider-style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

 <link media="screen" rel="stylesheet" href="css/colorbox.css" />

 <link media="screen" rel="stylesheet" href="css/jquery.tweet.css" />

 <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

 <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>

 <script src="js/jquery.colorbox.js"></script>

 <script src="js/jquery.tweet.js"></script>

 <script type='text/javascript'>
   $(function(){
     $("#fromtwo").tweet({
       avatar_size: 32,
       count: 5,
       username: ["xxxxxxxxxxxxxx"],
       loading_text: "<center><br /><br /><br /><br /><br /><br /><br /><br /><strong>Conectando ao Twitter...</strong><br /><br /><br /><br /><br /><br /><br /><br /><br /></center>",
       refresh_interval: 20
     });
   });
 </script>

<script type="text/javascript">
$(window).load(function() {
   $('#slider').nivoSlider({
       effect:'fade', // Specify sets like: 'fold,fade,sliceDown,random'
       slices:40, // For slice animations
       boxCols: 8, // For box animations
       boxRows: 4, // For box animations
       animSpeed:800, // Slide transition speed
       pauseTime:7000, // How long each slide will show
       startSlide:0, // Set starting Slide (0 index)
       directionNav:true, // Next & Prev navigation
       directionNavHide:true, // Only show on hover
       controlNav:false, // 1,2,3... navigation
       controlNavThumbs:false, // Use thumbnails for Control Nav
       controlNavThumbsFromRel:false, // Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', // Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
       keyboardNav:false, // Use left & right arrows
       pauseOnHover:true, // Stop animation while hovering
       manualAdvance:false, // Force manual transitions
       captionOpacity:0.8, // Universal caption opacity
       prevText: 'Anterior', // Prev directionNav text
       nextText: 'Próximo', // Next directionNav text
       beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded
   });
});
</script>

<script>
	$(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$("a[rel='example1']").colorbox();
		$("a[rel='example2']").colorbox({transition:"fade"});
		$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
		$("a[rel='example4']").colorbox({slideshow:true});
		$(".example5").colorbox();
		$(".example6").colorbox({iframe:true, innerWidth:470, innerHeight:344});
		$(".example7").colorbox({width:"20%", height:"25%", iframe:true});
	});
</script>

<script language="JavaScript">
<!-- Begin - função para "PreLoad" de imagens
image1 = new Image();
image1.src = "images/menuTopo/home_hover.jpg";
image2 = new Image();
image2.src = "images/menuTopo/biografia_hover.jpg";
image3 = new Image();
image3.src = "images/menuTopo/agenda_hover.jpg";
image4 = new Image();
image4.src = "images/menuTopo/novidades_hover.jpg";
image5 = new Image();
image5.src = "images/menuTopo/mural_hover.jpg";
image6 = new Image();
image6.src = "images/menuTopo/fotos_hover.jpg";
image7 = new Image();
image7.src = "images/menuTopo/videos_hover.jpg";
image8 = new Image();
image8.src = "images/menuTopo/downloads_hover.jpg";
image9 = new Image();
image9.src = "images/menuTopo/contato_hover.jpg";
image10 = new Image();
image10.src = "images/integrantes/001a.jpg";
image11 = new Image();
image11.src = "images/integrantes/002a.jpg";
image12 = new Image();
image12.src = "images/integrantes/003a.jpg";
image13 = new Image();
image13.src = "images/integrantes/004a.jpg";
image14 = new Image();
image14.src = "images/box-tit-agendah.png";
image15 = new Image();
image15.src = "images/box-tit-muralh.png";
image16 = new Image();
image16.src = "images/box-tit-fotosh.png";
image17 = new Image();
image17.src = "images/box-tit-novidadesh.png";
image18 = new Image();
image18.src = "images/box-tit-twitterh.png";
image19 = new Image();
image19.src = "images/box-tit-videosh.png";
image20 = new Image();
image20.src = "images/btn-twitterh.png";
image21 = new Image();
image21.src = "images/btn-orkuth.png";
image22 = new Image();
image22.src = "images/btn-facebookh.png";
image23 = new Image();
image23.src = "patrocinadores/centenaroh.png";
image24 = new Image();
image24.src = "patrocinadores/societyh.png";
image25 = new Image();
image25.src = "patrocinadores/madebalh.png";
image26 = new Image();
image26.src = "patrocinadores/lojaoesteh.png";
image27 = new Image();
image27.src = "patrocinadores/macodesch.png";
image28 = new Image();
image28.src = "patrocinadores/arcush.png";
image29 = new Image();
image29.src = "patrocinadores/faveroh.png";
image30 = new Image();
image30.src = "patrocinadores/rollstarh.png";
image31 = new Image();
image31.src = "patrocinadores/tarsoturh.png";
// End --></script>

e também me utilizo dessa função, que está no index.php também, para carregar a página numa div, evitando o carregamento inteiro da página para que o player de música não fique parando...

  <script type="text/javascript"> 
   $(document).ready(function(){  
       $("#abrirpag a").live('click',function( e ){  
           e.preventDefault();  
           var href = $( this ).attr('href');  
           if( $( this ).attr('target')=='_blank' )
		window.open( href );
		else
		$("#page").load( href + "#page");  
       });  
   });  
   </script>

Quando carrega o index.php não há nenhum travamento...

No index.php, dentro da div #page tem todo o conteúdo que vai ser carregado inicialmente...

E também tem o mesmo conteúdo dentro do inicial.php, por causa do botão Home...

No arquivo biografia.php, por exemplo, eu tenho que carregar as funções Jquery novamente:

<link media="screen" rel="stylesheet" href="css/jquery.tweet.css" />
<link rel="stylesheet" type="text/css" href="css/skin.jcarousel.patrocinadores.css" />
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script src="js/jquery.colorbox.js"></script>

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
   // Disable autoscrolling if the user clicks the prev or next button.
   carousel.buttonNext.bind('click', function() {
       carousel.startAuto(0);
   });

   carousel.buttonPrev.bind('click', function() {
       carousel.startAuto(0);
   });

   // Pause autoscrolling if the user moves with the cursor over the clip.
   carousel.clip.hover(function() {
       carousel.stopAuto();
   }, function() {
       carousel.startAuto();
   });
};

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
       auto: 2,
       wrap: 'circular',
       initCallback: mycarousel_initCallback
   });
});

</script>

<script>
	$(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$("a[rel='example1']").colorbox();
		$("a[rel='example2']").colorbox({transition:"fade"});
		$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
		$("a[rel='example4']").colorbox({slideshow:true});
		$(".example5").colorbox();
		$(".example6").colorbox({iframe:true, innerWidth:470, innerHeight:344});
		$(".example7").colorbox({width:"20%", height:"25%", iframe:true});
	});
</script>

<script language="JavaScript" type="text/javascript">
biografia01 = new Image();
biografia01.src = "images/tit-agendah.png";
biografia02 = new Image();
biografia02.src = "images/tit-videosh.png";
</script>

O que eu posso fazer para deixar o site menos pesado, para que não de essas travadas? :S

Também tem outro problema, no biografia.php, quando clica no vídeo, parece que ele carrega duas vezes o vídeo com o efeito do colorbox... Daí para fechar o vídeo tem que clicar fora duas vezes, e não uma...

Obrigadoo

JCMais · Junho 14, 2011

Olá Buthy, o seu código pode ser melhorado, primeiramente, retire os event listenersque não estão sendo usados na configuração do nivoSlider:

        beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded

Não vejo o uso deste script, parece-me que você copiou diretamente da demonstração, se não está sendo usado, retire-o:

<script>
               $(document).ready(function(){
                       //Examples of how to assign the ColorBox event to elements
                       $("a[rel='example1']").colorbox();
                       $("a[rel='example2']").colorbox({transition:"fade"});
                       $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
                       $("a[rel='example4']").colorbox({slideshow:true});
                       $(".example5").colorbox();
                       $(".example6").colorbox({iframe:true, innerWidth:470, innerHeight:344});
                       $(".example7").colorbox({width:"20%", height:"25%", iframe:true});
               });
</script>

Se desja usar o colorbox em apenas um elemento da página, recomendo aplicar à ele uma Id, e usá-la para ativar o colorbox no mesmo, se for em mais de um alimento, aplique algum atributo semelhante entre eles. Estes pre-loaders também parecem bem lentos. O jCarousel que está usando está dando um erro: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..., revise o seu código. E caso use o Firefox intale o firebug, vai ajudar.

Buthy · Junho 14, 2011

Então cara, já melhorei a parte do NivoSlider...

Essa do Colorbox, eu uso sim, lá no footer... Só que eu só uso o example7, daí retirei todos os outros...

O que tava deixando o site lerdo, é que eu estava carregando os arquivos .js novamente, nas páginas onde elas estavam sendo usadas, sendo que o melhor é carregar todos no index.php :D

Agora está tudo certo!

Obrigado!

Ah... Também estou usando esse site: http://javascriptcompressor.com/

Para "minimizar" os códigos .js :D

JCMais · Junho 14, 2011

Bom ver que está resolvido. :joia:

Mas note o erro do JCarousel, ele pode iniciar um loop infinito, e isso pode travar o depurador de javascript do navegador.

Buthy · Junho 16, 2011

Hmm...

Mas eu só estou usando essa parte:

<script>
               $(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:470, innerHeight:344});
                       $(".example7").colorbox({width:"20%", height:"25%", iframe:true});
</script>

Mesmo assim entra no loop infinito??

Nesse eu deveria por assim então:

$(".example6").colorbox({iframe:true, innerWidth:470, innerHeight:344, width:100, height:100});

É isso?

JCMais · Junho 16, 2011

Buthy eu me refiro ao JCarousel, não ao Colorbox.

Buthy · Junho 17, 2011

aff, que burro! não tinha visto! ashuiahsiahasassiashasasi

Seria só definir o width e height, ficando como está abaixo, e então o loop estaria resolvido??

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
       auto: 2,
       wrap: 'circular',
       width: 100,
       height: 100,
       initCallback: mycarousel_initCallback
   });

Obrigado cara!

JCMais · Junho 17, 2011

Sim, apenas isto. :)

Buthy · Junho 17, 2011

Ok cara, então está resolvido :D

Valeu!

Arquivado

[Resolvido] Site muito pesado por causa do JQuery

Recommended Posts

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante