preload background image animazione sequenza

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
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
Codice:
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
Codice:
<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
Codice:
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

Utente Attivo
11 Feb 2010
57
0
0
Friuli
www.softhare.it
Un hack più che una soluzione...

Aggiungi una porzione di codice tipo:

Codice:
<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...
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Immagine di caricamento pagina (preload) jQuery 1
Z preload IFRAME Javascript 3
V preload al centro del liquid layout Flash 0
J Best Ways to Preload Image JavaScript with CSS, AJAX Javascript 0
K barra di preload durante caricamento video Flash 2
L aiuto su preload Ajax 0
emanuelevt problema preload img con glossy Javascript 0
I Preload immagini. HTML e CSS 2
C Preload e clip filmato Flash 1
A preload per pagina inclusa HTML e CSS 0
A preload cd multimediale Flash 0
X [jquery] effetto preload sino a caricamento del div jQuery 1
G preload e swf esterno Flash 1
N problemi barra preload.. Flash 7
C Script preload che funziona solo con IE... Javascript 0
M Aggiungere un preload ai contenuti con jquery jQuery 1
F Aiuto preload!! Aiutatemi.. Flash 1
E preload con barra di avanzamento Flash 6
I Come evitare che il preload compaia 2 volte? Flash 1
B Caricamento immagini in preload e redirect al termine HTML e CSS 5
S Preload video on-line HTML e CSS 0
I Preload! Flash 9
Simosito Su preload Javascript 9
Y rollover + preload Javascript 4
M problema preload Flash 9
Z Preload Immagini e Immagine Ajax 2
A Preload Flash 8
P come realizzare un preload con swish? Flash 2
A Come inserie un preload in una pagina html Flash 0
purno preload immagini HTML e CSS 1
V Preload in una pagina html ASP.NET 1
R preload Flash 7
F Preload Flash 3
P preload + loop Flash 2
T Aiuto Preload HTML e CSS 0
metalgemini Maledetto preload... Flash 4
metalgemini Maledetto preload... Flash 0
S Preload???? Javascript 6
P per preload (importare avi in flash) Flash 0
D preload flash Flash 1
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
L [HTML] Background-image HTML e CSS 9
A cordova-plugin-background-mode Sviluppo app per Android 0
A [HTML] Background size per dispositivi mobili HTML e CSS 4
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
asevenx [HTML] -webkit-filter solo su immagine di background HTML e CSS 5
S [WordPress] Footer php - il background riempie tutta la pagina - help WordPress 1
cornamusa [HTML] Immagine di Background HTML e CSS 1
Andrea Alessandrini [HTML] background annidati che si sovrappongono male HTML e CSS 3
S [HTML] Background responsive HTML e CSS 21

Discussioni simili