Precarga de Imagenes con Javascript

Rebe_Lunitari · #1 (**permalink**) 09/01/2012, 12:23

Hola, buenas!!!

Vereís, estoy dandole retoques a mi pagina, y necesito hacer una precarga de las imagenes (las que componen el fondo, el banner, el menu...), para que carguen a la vez, y más rapido que el resto del contenido. Sino entendi mal, de esta manera, las imagenes solo necesitaran cargarse una sola vez, ¿verdad?

Como mis conocimientos de Javascript son bastante reducidos, estuve viendo las FAQ, y encontré este código para introducir en el Head:

Código:

<script>
var foto=new Array()
foto[0]=new Image()
foto[0].src="pepito.jpg"
foto[1]=new Image()
foto[1].src="jaimito.jpg"
foto[2]=new Image()
foto[2].src="jorgito.jpg"
</script>

Ahora bien, investigando un poco por ahí, encontre otro código diferente:

Código:

<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>

Y una segunda parte que se debe insertar en el body:

Código:

<BODY> 
<script> 
cargarimagenes(); 
</script> 
</BODY>

Este ultimo es un código bastante viejo, tiene fecha del 2002 y de entonces a ahora, no se si seguira siendo correcto/util.

¿Cuál debo utilizar? Muchas gracias!

IsaBelM · #2 (**permalink**) 09/01/2012, 14:22

la precarga es correcta. puede que también te interese usar css sprites o lazy load

Rebe_Lunitari · #3 (**permalink**) 09/01/2012, 14:36

Use los Sprites para el menu, y algun boton. Lazy Load no lo conocía, pero ya te digo, mis conocimientos javascript/jquery son pocos, y lo que he ido aprendiendo ha sido con el diseño de esta pagina.

¿Cual de los dos codigos que puse es el que debería usar? ¿Debería incluirlo en todas las paginas?

Gracias!

IsaBelM · #4 (**permalink**) 09/01/2012, 15:24

el segundo. y no, sólo has de incluirlo en aquellas página que tienen un mayor acceso directo (inicio, etc). es decir que no se llega redireccionado.
lo que una precarga hace, es cargar los archivos en la caché del navegador. de tal modo que en el momento en que sean requeridos la carga sea mas rápida

Rebe_Lunitari · #5 (**permalink**) 09/01/2012, 15:26

Vale! Muchisimas gracias! Mañana pruebo y te digo a ver si me fue bien... ;)

Rebe_Lunitari · #6 (**permalink**) 10/01/2012, 09:02

Vale, tengo una pregunta más... así que disculpa mi ignorancia. Donde encontré el codigo de precarga, recomendaba insertarlo antes de cualquier otro script. Estos son los scripts que lleva mi Index (aunque todas las seccion que componen la pagina, son iguales a él, solo que con variacion de texto/fotos).

Código:

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascript/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="javascript/hoverIntent.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<script type="text/javascript">

	$(document).ready(function() { 
        $('ul.sf-menu').superfish({
				delay:       0,
				speed:       'fast',
				autoArrows:  false,
				});	
		});
	$(function(){
        $('#cuerpo').jScrollPane();
});
</script>

Según esto, deduzco que el lugar correcto para insertar el script de precarga, sera tras <script type="text/javascript"> e inmediatamente antes de la funcion de Superfish. ¿no?

Aunque, el script-precarga tiene sus propias etiquetas de apertura y cierre <script></script>...

Código:

<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>

IsaBelM · #7 (**permalink**) 10/01/2012, 14:39

has de entender que la precarga no afectar a la página en la que se produce, sino en las siguientes. por lo tanto el lugar donde coloques el script es indiferente. lo que sí es importante es invocar a la función cuando esté todo el dom cargado, para no afectarle. esto lo puedes hacer de varias maneras, por ejemplo

window.onload
hacer la invocación de la función justo antes de la etiqueta </body>

Cita:

<head>
<script type="text/javascript">
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];

}

}

$(document).ready(function() {
$('ul.sf-menu').superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
});
});
$(function(){
$('#cuerpo').jScrollPane();
});

window.onload = function() {cargarimagenes();}; // 1
</script>
</head>
<body>
// todo el contenido (bloques, textos, imágenes, ..)

<script type="text/javascript">
cargarimagenes(); // 2
</script>
</body>