Precarga de imágenes en JavaScript

 
Precargar imágenes puede ser muy útil en casos donde se necesite pasar de una imagen a otra rápidamente o cuando queremos que una imagen se cargue al principio(como un logo de la página).
Se hace muy fácilmente, primero se declara una variable como imagen (var imagen = new Image;) y a continuación esta se carga con la imagen deseada pasandole su dirección(imagen.src = "img.jpg";).

En el ejemplo que hemos puesto se trata de una imagen que cuando el ratón pasa por encima(el evento onmouseover), esta se cambia por un gif animado, creando la apariencia de un botón animado. A esta imagen se le podría poner una etiqueta "<a>", para que esta imagen haga alguna acción.


En el HEAD:
<script language="javascript">
//Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
//Copyright © McAnam.com
            
    var imagen1 = new Image();
    imagen1.src = "imagenes/uno.gif";
    var imagen2 = new Image();
    imagen2.src = "imagenes/dos.gif";

//-->            
</script>

En el BODY:
<table>    
    <tr>
        <td>
            <a href="http://www.mcanam.com">
                <img src="imagenes/uno.gif" border="0" onmouseover="this.src=imagen2.src" onmouseout="this.src=imagen1.src">
            </a>
        </td>
        <td>Ir a McAnam.com</td>
    </tr>
</table>

Ejemplo:

Links relacionados:
Cambiar tamaño y peso de imágenes (PHP)


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com