preload background image animazione sequenza

[ntoflip]

Non chiedetemi perchè ma m'è venuto in testa di realizzare un'animazione in javascript e mi sono imbattuto nel problema generale del pre-caricamento delle immagini nel documento.. (immagini che in teoria dovrebbero essere visualizzate come sfondo di un div..)

Supponiamo che l'animazione sia una specie di conto alla rovescia. Ho realizzato delle immagini con dei numeri che purtroppo sono anche un po' pesantuccie ma non vorrei fermarmi davanti a questo problema..
In totale quindi ho una decina di immagini.. e un pulsante che fa partire il conto alla rovescia.. il codice è più o meno questo

file js

var num = 1;
var animazione;

function vai() {
	animazione = window.setInterval('cambiaBackground()', 1000);	
}


function cambiaBackground() {
	
if (num < 11) {
 document.getElementById('sfogliacarta').style.background = 'url('+num+'.png)';
 num++;
 } else {
 window.clearInterval(animazione);
 document.getElementById('sfogliacarta').style.background = 'url(stop.png)';
 num = 1;
 }
	
}

file html

<div>
    <div id="sfogliacarta"></div>
    <div><a href="#" onclick="vai()">Vai</a></div>
</div>

Il problema è che se il pulsante viene cliccato le immagini non vengono subito visualizzate e l'animazione quindi non riesce.. Cliccandoci un pò di volte finalmente tutto funziona perchè le immagini rimangono in memoria..
Allora ho provato a prericaricare le immagini con del codice tipo questo

img1 = new Image(); img1.src = '1.png';
// e cosi via per tutte le immagini

ma il problema permane.. praticamente credo che dovrei fare in modo che il pulsante sia attivo solo quando l'ultima delle immagini sia già caricata ma non so proprio da dove cominciare..

Qualcuno ha qualche suggerimento?

 

[softhare]

Un hack più che una soluzione...

Aggiungi una porzione di codice tipo:

<DIV STYLE="position:absolute;left:-200px;">
<IMG SRC="url_prima_img" width=8><br>
<IMG SRC="url_seconda_img" width=8><br>
...
<IMG SRC="url_ultima_img" width=8><br>
</DIV>

All'inizio del tuo script (specifica i nomi delle immagini da precaricare).

E' solo un hack, visto che comunque dovresti principalmente ottimizzare la grafica.

Comunque funziona meglio del tradizionale preload in javascript...