http://www.grupodeix...om.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
