Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Precarga en JS

Estas en el tema de Precarga en JS en el foro de Frameworks JS en Foros del Web. Hola: He buscado tanto en Google como en el buscador de aquí y no he encontrado exactamente lo que quería. Igual está... Cuento: Estoy haciendo ...
  #1 (permalink)  
Antiguo 11/07/2011, 04:28
 
Fecha de Ingreso: marzo-2011
Mensajes: 29
Antigüedad: 9 años, 7 meses
Puntos: 0
Precarga en JS

Hola:
He buscado tanto en Google como en el buscador de aquí y no he encontrado exactamente lo que quería. Igual está...
Cuento: Estoy haciendo una pequeña app que utiliza un montón de imágenes, y me gustaría que antes de empezar la app se fueran precargando todas las imágenes (y audio HTML5 también utilizo, si también se puede precargar, mejor), mientras aparece lo típico de "Cargando".
He leído en otros sitios que utilizan:
var b;
function a() {
b = new Image();
b.src = 'blah.jpg';
}

Y después body onLoad='a', y luego por ejemplo <img src='asdf.jpg' onclick='this.src=b.src' />. Con esto entiendo que cuando se haga el onclick la imagen aparecerá inmediatamente.

Pero lo que yo quiero es que se precarguen toodas las imágenes antes de empezar las acciones (que están todas dentro de function acciones() { }).

Lo que tengo por ahora es, fuera de toda función la declaración de imágenes (en plan var img1 = new Image(); ... var imgN = new Image(); ) Y luego una función cargaImagenes() que tiene img1.src='imagen1.jpg'; ... imgN.src = 'imagenN.jpg';

Y la pregunta es esa, como hacer para precargar todo antes de empezar con acciones(), porque he leído que onLoad no espera a que estén cargadas las imágenes. Y por tanto poner en plan onLoad="acciones" no me funcionaría.

Y un par de cuestiones: hay algunas imágenes que las utilizo como background de un DIV, y además está definido en el CSS. Si pongo esa imagen dentro de mi preloader, ¿también funcionará para ese caso?

La otra: Si ya he precargado una imagen, luego dentro de acciones(), ¿cómo debería "llamar" a la imagen precargada? podría poner simplemente "<img src='imagen1.jpg' />" asumiendo que imagen1.jpg ya está cargada, o debería poner en plan "<img id='img1' src='"+img1.src+"'>"?

Estoy usando jQuery, lo digo por si ahí hay alguna función que simplifique todo esto.

Saludos y gracias!


En resumen: que aparezca el div de "Cargando" hasta que TODAS las imágenes estén ya precargadas. Y no son imágenes que aparezcan en ese momento en la página, sino que "puedan aparecer".

Última edición por cnavast; 11/07/2011 a las 05:11
  #2 (permalink)  
Antiguo 11/07/2011, 06:47
 
Fecha de Ingreso: marzo-2011
Mensajes: 29
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Precarga en JS

Ya está solucionado.
Hay que usar el atributo .complete de JS, que, para una imagen, te devuelve true si está cargada y false si no.
Eso hay que combinarlo con un setTimeout que cada x milisegundos compruebe si todas las imágenes están ya "complete", y si es así que ejecute acciones().

¡Saludos!

Etiquetas: html, javascript, jquery, js, precarga
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:24.