ESPAÑOL: ¡Bienvenido! Es la página inicial de OSIRIS LMS. Regístrese hoy mismo y obtenga acceso a todos nuestros CURSOS GRATUITOS. Clic aquí para registrarse ya. Hemos desarrollado una amplia gamma de cursos “online” (Programación, Multimedia, 3D, Habilidades suaves, etc.), disponibles 24X7. Para más detalle consulte la lista de Cursos Disponibles. Si tiene problemas con el acceso a la plataforma, vea el Tour Virtual de Osiris LMS. También puede consultar la sección de FAQ’s o enviar Solicitud de Soporte Técnico.

ForoForo de discusión
¿Cómo precargar las imágenes en una página HTML?
Buscador:
Foro > JavaScript > ¿Cómo precargar las imágenes en una página HTML?

Enviado por: Texto del mensaje
Support Osiris LMS 
Nivel : Jefe de Administradores
Mensajes : 114
> Perfil
Escrito el : Lunes 31-05-2010 A las : 20:21 ( > un mes )
Asunto : ¿Cómo precargar las imágenes en una página HTML?
Problema

La presencia de imágenes en las páginas web es algo inevitable. De hecho si examinamos el tamaño total de una página vemos que habitualmente el tamaño debido al texto es muy inferior al apartado gráfico, por eso para logar que nuestras páginas se descarguen de forma rápida es fundamental optimizar el tamaño de las imágenes, pero también podemos acelerar la descarga de éstas. Otras veces las imágenes no aparecen inicialmente sino cuando el visitante hace algo, como por ejemplo en los efectos rollover (cambio de la imagen al pasar el ratón), en este caso es fundamental que la imagen se encuentre ya cargada.

Solución

¿Cómo acelerar el proceso de descarga de las imágenes? Haciendo que el explorador las descargue desde el principio y no desde que las vea en el contexto de tota la página, como es lo habitual. Para esto usamos el objeto image del modelo de objetos del explorador. Para ello lo primero es anotar que imágenes están dentro de la página y luego para cada una de ellas creamos un objeto imagen a cuya propiedad src le asignamos la dirección de cada imagen.

imagen = new Image;

imagen.src = "/imagenes/imagen.jpg"

Cuando son muchas imágenes se suele usar una lista, un array, de objetos imágenes

Caso práctico

Como ejemplo supongamos una página donde tenemos un botón con dos imágenes: normal.gif y activa.gif (para cuando el ratón pasa por encima), en la sección Head de la página colocamos un script de ejecución inmediata:

boton = new Array(2)

boton[0] = new Image;

boton[0].src = "activa.gif";

boton[1] = new Image;

boton[1].src = "normal.gif";

Así desde el momento en que se ejecuten estas líneas el explorador comenzará a cargar las imágenes y cuando se necesiten (con un poco de suerte) estarán ya en la caché del ordenador y se mostrarán de inmediato.
Soporte de Osiris LMS
Amplía tus conocimientos en línea