Tengo una galería en mi sitio web. La galería contiene 15 imágenes, cada una de ellas tiene aproximadamente 500 KB (el tamaño total es de 7,5 MB).Cargando GIF (Preloader) se bloquea solo en Chrome
Como la galería demora un poco en cargarse (25 segundos en mi computadora, depende de la conexión), quiero que el visitante sepa que la galería se está cargando, por lo tanto, Ajax loading GIF.
Quiero que el visitante vea el archivo GIF tan pronto como ingrese a la página de la galería, hasta que las imágenes de la galería se hayan descargado y estén listas para su visualización.
Con el fin de lograr mi objetivo, esto es lo que he hecho:
Este es el comienzo del cuerpo de la página de la galería HTML:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
Y esta es la parte CSS de la galería:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
Básicamente, el GIF de carga se debe descargar tan pronto como un visitante ingrese a la página de la galería, porque es el primer objeto dentro del <body> que se va a descargar. Sin embargo, no es visible debido a la clase hiddenPic.
Este método debería ayudar a que la carga de GIF esté lista y visible como fondo de la galería lo antes posible, hasta que todas las imágenes de la galería se hayan descargado y la galería esté lista.
Sin embargo, el GIF de carga no funciona correctamente en Google Chrome; funciona perfectamente bien en Firefox & IE (girando sin problemas) - pero se atasca (no gira correctamente) en Chrome, desde el momento en que aparece hasta que la galería está lista.
Actualización: Sé que puedo poner en práctica una mejor galería (como las que se sugieren en los comentarios) que requerirían menos recursos por parte del usuario al entrar en la página de la galería - pero yo no entiendo cómo se puede ser la causa del problema cuando el cargador GIF funciona perfectamente en Firefox & IE.
¿Por qué el AJAX que carga el GIF no funciona correctamente en Chrome?
Cargando su sitio web parece funcionar como se esperaba, incluso en Chrome (v21.0.1180.77 m). Ciertamente, cuando cargo la página me presento con el giradiscos GIF, que luego es reemplazado por la galería. Yo diría que es bastante lento, es decir. No veo el spinner giratorio. Simplemente lo veo en 3 o 4 posiciones diferentes, pero es probable que se deba a cargar el resto de la galería y que mi PC sea un poco lenta. Sin embargo, estoy cargando la galería en aproximadamente 5-6 segundos, no en los 25 segundos que sugieres, lo que puede estar afectando los resultados. – Chris
Además, aunque creo que deberías tener un GIF giratorio, me pregunto si deberías cargar toda la galería de inmediato, por dos razones: 1) ralentiza toda la página y 2) desperdicia ancho de banda ya que las personas no pueden ver todo las fotos. Exploraría un proceso de 1) cargar cada imagen cuando se selecciona (por lo que gif spinner para cada imagen) o 2) cargar decir las primeras 3. Luego, cuando presionen 'Next Image' (para mostrar la imagen 2) cargar la imagen 4. No verán ninguna diferencia, pero la harán mucho más rápida y eficiente. – Chris
Entonces, ¿por qué la ruleta está trabada es porque cargar las imágenes de la galería requiere la mayoría de los recursos? Quiero hacer girar el cargador - el GIF no es tan pesado, así que no veo por qué se atasca y no puedo hacerlo girar correctamente, incluso (bueno, solo) cuando las imágenes se están descargando a la computadora. Acerca de su sugerencia, parece una excelente manera de acortar el tiempo de espera y hacer que funcione rápidamente. No estoy seguro de qué camino es mejor, pero si voy a usar no'1, tengo que agregar miniaturas a mi galería. – amiregelz