Precarga de imágenes en JavaScript
Este articulo explica como por medio de
JavaScript podemos precargar las imagenes de nuestro website para que las imagenes cargen
mas rapido.
El siguiente codigo va entre las
etiquetas <HEAD> y </HEAD>...
<script
language="javascript 1.2">
<!--
var i;
var imagenes = new
Array("imagen1.gif","imagen2.gif","imagen3.gif");
var lista_imagenes = new Array();
function cargarimagenes(){
for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];
}
}
//-->
</script>
Bien, en resumen lo que realiza este
codigo es precargar las imagenes puestas en el vector imagenes...
var imagenes = new
Array("imagen1.gif","imagen2.gif","imagen3.gif");
Podemos modificar la ruta de acceso a las
imagenes ("imagen1.gif"....) y asi definir que imagenes queremos precargar,
ahora bien lo que nos falta es llamar a la funcion cargarimagenes para cargar nuestras
imagenes, esto lo hacemos dentro de la etiqueta BODY y es conveniente realizarlo antes de
cualquier otro codigo...
<BODY>
<script>
cargarimagenes();
</script>
</BODY>
Con el codigo anterior ya tenemos
cargadas las imagenes, lo que nos queda es administrar bien la carga de imagenes, por
ejemplo en una pagina x que no tenga mucho contenido podemos cargar las imagenes de otra
pagina del sitio asi ya no ahorramos algo de tiempo, entonces cuando el usuario visita esa
pagina las imagenes se cargan de forma inmediata ;-) Espero que les sea util, Saludos!
|
