> Manuales > Tratamiento de imágenes en Javascript

Describimos la motivación para hacer una precarga de imágenes y como el código que se suponía correcto no realiza la precarga correctamente.

El inicio

Personalmente me enfrenté al problema de precarga de imágenes en la web al crear una página en la que, por diferentes razones,se debían cargar un número considerable de imágenes estáticas y otras para uso en eventos de Roll-Over. La página además debía aparecer en una ventana maximizada del navegador (sin barras de scroll,de navegación,de direcciones,etc) para poder apreciar un fondo de 800x600 píxeles. Para hacer ésto, desde la primera página que se carga (página A) se declara un un window.open con el atributo FULLSCREEN=YES que muestra nuestra verdadera ventana principal maximizada (página B).

Para que A no se quedara como página vacía pensé en utilizarla para precargar ahí los gráficos que B emplearía.

El problema

Al cargarse B a partir de A teóricamente todos sus gráficos debían aparecer al instante en pantalla, pero ésto no sucedía así. El código básicamente era:

CóDIGO 1

<HTML>
<!-- Esta es la página A que debía precargar las imágenes que se usan en B -->
<HEAD>
<TITLE>Cargando...</TITLE>
<SCRIPT TYPE="text/javascript">

function cargaImagen(arg) {
if (document.images) {
    document.write("Cargando imagen: " + arg + "...<br>");
    rslt = new Image();
    rslt.src = '"'+ arg +'"';
    document.write("\t cargada con éxito<br>");
    return rslt;
}
}

if (document.images) {
    imagen1=cargaImagen("imagenes/pedazo1.jpg");
    imagen2=cargaImagen("imagenes/pedazo2.png");
    imagen3=cargaImagen("imagenes/pedazo3.jpg");
    imagen5=cargaImagen("imagenes/pedazo5.jpg");
    imagen6=cargaImagen("imagenes/pedazo6.png");
    imagen7=cargaImagen("imagenes/pedazo7.png");
    imagen8=cargaImagen("imagenes/pedazo8.jpg");
    imagen9=cargaImagen("imagenes/pedazo9.jpg");
    document.write("CARGA TERMINADA");
}

<-- Aquí abrimos la ventana maximizada B que es nuestra verdadera página de inicio en la web -->

privenmax=window.open('inicio.html','principal','fullscreen=yes');
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>


FIN DE CÓDIGO 1

RESULTADO: Sale 1 ventana maximizada (inicio.html) que carga las imágenes como siempre, y lo que es más, la primera ventana en la que con document.write se indica qué imágenes se han ido cargando queda minimizada en la barra de tareas, con lo cual no se ve.

José Alberto Torres Arroyo

Ldo en Publicidad y RR.PP

Manual