Chrome muy lento

nasveove · #1 (**permalink**) 20/08/2013, 11:54

Hola, lo primero saludar a toda la web y agradecerle el trabajo que estáis haciendo, y aquí va mi problema: estoy haciendo una página web, acabo de poner una galería de imágenes con su correspondientes miniaturas, la historia está en que con Mozilla y Explorer me funcionan al pelo, pero con Chrome me va lentísimo, tarda 5 segundos mínimo en cargar la foto y mientras la carga me bloquea la página, espero que podáis ayudarme por que no tengo ni idea de porque puede ser. Un saludo y gracias de antemano

cesa_r · #2 (**permalink**) 20/08/2013, 14:02

Con esos datos no bas a conseguir nada, que galeria utilizas? antes de poner la galeria te presentaba el mismo problema? cual es tu web (solo si la tienes en online)?

nasveove · #3 (**permalink**) 21/08/2013, 06:11

Lo siento por no haberme explicado con claridad, es un pase de diapositivas, con una miniatura de cada imagen encima y una debajo donde van saliendo en grande según vas pinchando encima de una imagen u otra, antes de poner la galería no pasaba nada, e probado a en vez de poner la url de la imagen en local a probar a subirlas a un servidor como imageshack y poner en el src la dirección que me da y nada, pasa lo mismo. No puedo poner el link de la página porque no la tengo subida a ningún hosting todavía, puedo poner todo el código tb. un saludo y gracias

cesa_r · #4 (**permalink**) 21/08/2013, 18:16

¡sera necesario que muestres el codigo de tu galareria!

nasveove · #5 (**permalink**) 21/08/2013, 18:57

De acuerdo aquí os lo dejo haber que le puede pasar

AQUÍ EL CÓDIGO HTML:

<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="miEstilo.css">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="galeria">
<div id="galeria_imagen">
<img id="imgGaleria" src="images/simbolos/1.jpg" /></div>
<div id="galeria_miniaturas">
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/1.jpg';" src="images/simbolos/1.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/2.jpg';" src="images/simbolos/2.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/3.jpg';" src="images/simbolos/3.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/6.jpg';" src="images/simbolos/6.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/7.jpg';" src="images/simbolos/7.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/20.jpg';" src="images/simbolos/20.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/23.jpg';" src="images/simbolos/23.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/24.jpg';" src="images/simbolos/24.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/25.jpg';" src="images/simbolos/25.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/26.jpg';" src="images/simbolos/26.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/27.jpg';" src="images/simbolos/27.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/30.jpg';" src="images/simbolos/30.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/32.jpg';" src="images/simbolos/32.jpg" />
<a href="catalogoSimbolos2.html"><img class="miniatura" src="images/flechaD.png" width="x" height="x"/></a>
</div>
</body>
</html>

AQUÍ EL CSS:

#galeria, #galeria * {box-sizing:border-box,-moz-box-sizing:border-box}
#galeria {
padding-bottom: 0;
background: white; /* Fondo de la galería */
width: 65%; /* Ancho de la galería */
margin-left:31%;
margin-top:20%;
position:absolute;
}
#galeria_miniaturas {
display: table;
margin: 0 auto;
position:absolute;
margin-top:0%;
}
#imgGaleria {
border: 1px solid #F2F2F2; /* Borde de la imagen */
padding: 0.5%;
width: x; /* Ancho de la imagen */
height: x; /* Alto de la imagen */
width:60%;
position:absolute;
margin-top:23%;
margin-left:18%;
}
.miniatura {
width: 9%; /* Ancho de las miniaturas */
height: 200%; /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 0px;
margin: 1% 1%;
}
.miniatura:hover {
opacity:.8; /* Opacidad */
-moz-opacity:.8;
-khtml-opacity:.8;
filter:alpha(opacity=80);
}
.miniatura:active {
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=80);
}

¿Qué creéis que puede ser?. Un saludo