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