Javascript - L'animazione del "banner" non mi parte al primo lancio della pagina

20/12/10 12:16

Ciao a tutti.
Ho fatto una semplice animazione per la testata di questo sito:
afservice.altervista.org
attraverso il quale faccio sfumare la scritta (che è un'immagine in realtà

passando attraverso vari colori. Ho utilizzato la libreria canvas, e ho inserito le varie funzioni utili all'interno di una classe: bannerClass.js.
Ora: è la prima volta che utilizzo delle classi in javascript, e quindi di per se non si se ci sia un errore nella costruzione della stessa.
Per far avviare l'animazione ho semplicemente inserito l'attributo onload del <body>:

<body onload="var banner = new BannerAnimation()">

E per come è strutturato il codice, dovrebbe lanciarmi l'animazione alla creazione dell' oggetto.
Tuttavia l'animazione parte solo dopo un refresh della pagina, cosa che mi scoccia alquanto:
Per far vedere l'animazione devo ricaricare la pagina, o portarmi su un altro link interno.

Il problema è che non capisco perchè... Dove cavolo è l'errore di impostazione (perchè credo che il problema non stia nell'algoritmo dell'animazione vera e propria, dato che di per se funziona, anche se dopo un refresh)..
Grazie anticipatamente...

PS: il codice javascript è in afservice.altervista.org/JS/…

aaa

21/12/10 13:35

Mte90

canvas lo sai che su ie67-8 non funziona?
Secondo me faresti prima a fare un img con la scritta trasparente e il resto nero che è il background di un div per esempio.
Poi con javascript ed un timer cambi lo sfondo del colore del div e ottieni l'effetto.
C'erano diverse esempi fatti con jquery.
Non si appoggia a nessun framework questa classe altrimenti in jquery potevi usare la funzione che verificava il caricamento della pagina e lo faceva partire.

aaa

21/12/10 13:39

a_butta

Non uso jQuery per un'animazione di una cinquantina di righe: un'intera libreria che mi appesantisce per niente. Canvas non funziona su ie fino alll'8, e infatti, se avessi letto il codice javascript ti saresti accorto che avevo già messo una soluzione a questo problema.
Ho risolto mettendo un tag image che carica di per sè l'immagine, poi attraverso javascript vado semplicemente a sostituire il tag img al tag canvas e avvio l'animazione.

aaa