¿Por qué la precarga de imágenes es ineficaz?

Question

Mi proyecto CMS tiene una elegante pantalla de inicio de sesión de la web 2.0 que se desvanece sobre la pantalla mediante javascript. ¿Cómo es posible que, aunque he asegurado un 120% de que las imágenes están precargadas (utilicé el monitor de recursos en las herramientas de desarrollo) todavía tardan un segundo en aparecer cuando aparece mi pantalla de inicio de sesión. ¡Destruye por completo la fantasía! Echar un vistazo:

http://www.dahwan.info/Melior (enlace roto)

Al hacer clic en inicio de sesión, la pantalla se supone que se desvanecen a oscuro con una imagen 75% 1px alfa PNG. Aunque la imagen está precargada, no aparece hasta después de que finaliza la animación. Sin embargo, si hace clic en cancelar e iniciar sesión de nuevo, la animación fluye sin problemas y perfectamente.

¿Alguien puede pensar en una solución a este problema? Lo estoy teniendo con el resto de la GUI de mi CMS también. Es como si no hubiera una imagen precargando lo que nunca.

Gracias por las respuestas

EDIT: Ah sí, estoy actualmente en desarrollo este CMS para Google Chrome 5.0.375.99, añadiendo compatibilidad multi navegador más tarde. Perdón por dejarlo fuera

Answer 1

He encontrado una solución a mi problema. Ahora probé esto en tres navegadores en dos computadoras diferentes con resultados perfectos. En resumen, en mi función de precarga de imagen en javascript, agregué cada una de las imágenes al DOM en una etiqueta Div invisible.

$('#img_preload').append($('<img />').attr('src', img.src)); 

Las imágenes que ahora se añaden a la carga de la página en Dom, y de acuerdo con mi teoría descansa en la memoria de mis ordenadores de gama baja, que aparece al instante cuando mi CMS las necesita.

Gracias por tus comentarios :)

Answer 2

El hilo de UI solo puede administrar una tarea a la vez - ejecutará javascript o actualizará la UI. Si hay un montón de javascript analizando/ejecutando antes del código que precarga la imagen, eso podría estar causando el retraso.

Otra sugerencia es desactivar la capacidad de clics en el enlace de inicio de sesión hasta que la imagen se haya detectado en la página.

Para ello es bastante sencillo:
función disableBtn (el) {var
BTN = document.getElementById (el);
var btnId = btn.id;
btn.disabled = true;
}

Para volver a habilitarla, configure btn.disabled = false (después de detectar que su imagen se ha agregado al DOM).

Answer 3

También puedes, simplemente precarga de ellos en una matriz. Su problema puede deberse a lo que se conoce como "recolección de basura". Aquí es donde el navegador busca objetos que consumen memoria que ya no tienen una instancia en la pantalla y no están siendo referenciados por otra cosa en la memoria.

Si carga imágenes en su edad web, sin embargo, deberían cargarse en la memoria caché. Por lo tanto, todavía deben volver a aparecer cuando se hace referencia de nuevo. Sin embargo, las imágenes también pueden desaparecer si la caducidad de la caché no se establece durante un período de tiempo suficientemente largo para este tipo de archivos.

Tu problema también podría ser específico del navegador ... He descubierto que siempre es mejor crear un "anclaje" para el contenido precargado colocándolos en una matriz de imágenes y luego usando la matriz para llamar las imágenes cuando sea necesario en lugar de la URL de la imagen (URI).

Aquí hay un artículo rápido y sucio que cubre este tema.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Una información útil sobre este problema:

La solución codemonkey funciona porque, al poner las imágenes en un div oculto, el navegador tiene que mantener esas imágenes en la memoria y listo para una posible cambio de visibilidad de div Si el usuario necesita cambiar la visibilidad de div de oculto a bloque, tiene que hacerse al instante. Es por eso que simplemente cargar todas las imágenes en una matriz no funciona correctamente.