Unidad 16. Comportamientos avanzados (III)

16.3. Carga previa de imágenes

Este comportamiento te será muy útil para mejorar la visualización de tus páginas web en determinados casos.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador a descargar las imágenes con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el usuario verá la estructura completa de la página con las imágenes incluidas ya cargadas y mostrándose.

 

Este método se diferencia del tradicional en que si no establecemos este comportamiento, la página se carga (sólo texto) y se visualiza antes de que las imágenes estén cargadas por completo, aunque respetando su hueco. Ten en cuenta que ésta es la opción más aconsejada en la mayoría de los casos.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes. Por lo que hay unos momentos en los que la página no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en cuenta hasta que se descargasen).

 

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botón , selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones , podrás indicar su ubicación pulsando el botón Examinar.

¿Qué imágenes debemos de cargar? Aquellas que son imprescindibles en el diseño de la página o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el cursor esté encima esa imagen cambie. Hemos de entender que las imágenes se cargan cuando se necesitan. Por tanto, la imagen de fondo no se cargará hasta que no pasemos el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner el cursor la imagen desaparezca pero la de sustitución aún no se haya cargado. En este caso, es conveniente precargar esa imagen.

La imagen de sustitución que ya explicamos incluye la carga previa de imágenes.

Por su puesto, resulta contraproducente cargar imágenes que no vayamos a emplear.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu página tarda demasiado en cargarse la abandone.