pesantezza Javascript client-side

[merovingio92]

Ciao a tutti.:byebye:
Dunque come ho scritto nella mia precedente discussione sono riuscito a risolvere il problema dello smartphone detector e del flash, ora ho però un problema che potrebbe essere davvero irrisolvibile.

La pagina che si va a caricare quando il sito è visualizzato da smartphone è corretta, con il suo menù in javascript al posto del flash, però il problema è che tale menù è probabilmente troppo pesante per gli smartphone (infatti il file che ha una grandezza complessiva di circa 700 Kb dovuta proprio al menu in javascript:crying, e quindi lagga da morire su un iphone 4 per esempio, e su apparecchi antecedenti neanche parte, mentre su un iphone 5 se la cava bene.

Ne deduco quindi che il problema derivi dalle prestazioni del cellulare stesso. Avevo quindi pensato di far eseguire il javascript da lato server, in modo da "appesantire" il server piuttosto che il cellulare.
E' possibile o per ora non se ne parla?
Grazie a chiunque risponda.

 

[criric]

700 Kb per un menu sono troppi. Io cercherei un menu piu leggero

 

[merovingio92]

In realtà il fatto della pesantezza non dipende propriamente dallo script. Ho trovato un programma in rete che converte automaticamente un flash in javascript (si chiama Swiffy), e così ho convertito il mio menù da flash a javascript automaticamente. Il problema è che lo script di output oltre ad essere pesante (per gli smartphone), è anche difficile da capire dal punto di vista tecnico, e quindi difficilmente modificabile.
Qualsiasi idea per risolvere il problema è ben accetta.

 

[criric]

Ho riguardato il menu, non è poi cosi difficile replicarlo con html e css e se prorpio non puoi fare a meno dell'effetto sonoro ci puoi mettere anche un po di javascript
La mia personale idea rimane quella : creane uno simile solo con html e css e caricalo se l'utente sta usanto un dispositibo mobile

 

[merovingio92]

Ok mi piace. Ma davvero con html e css quell'animazione? Sembra davvero un gigantesco casino da fare in HTML... Puoi darmi un'idea generale della linea di sviluppo?
Grazie intanto per la risposta.

 

[criric]

Il menu di base protrebbe essere questo

<style type="text/css">
    div#navigation {
        background-color: white;
        text-align: center;
    }
    div#navigation ul{
        margin:0;
        padding:0;
        list-style-type: none;
    }
    div#navigation ul li {
        float:left;
        text-align: center;
        margin:0 1px;
        background-color: #B00508;
        padding:10px 20px;
        font-size: .8em;
        border-bottom-left-radius:4px;
        border-bottom-right-radius:4px;
    }
    div#navigation ul li:hover,div#navigation ul li.current {
        background-color: #212121;
    }
    div#navigation ul li a {
        color:white;
        text-shadow: 2px 2px #000;
        text-decoration: none;
        font-size: .8em;
    }
</style>

<div id="navigation">
    <ul>
        <li class="current"><a href="#">HOME</a></li>
        <li><a href="#">SERVIZI</a></li>
        <li><a href="#">HOSTING</a></li>
        <li><a href="#">TARIFFE/COSTI</a></li>
        <li><a href="#">ORARI</a></li>
        <li><a href="#">CONTATTI</a></li>
    </ul>
</div>

Qui trovi degli esempi sull'animazione dei tabs in Jquery
Il secondo è quello che si avvicina di piu a quello in flash, ma in rete c'e ne sono tanti altri
Alcune animazioni dovrai farne a meno ma almeno hai un menu da 1kb

 

[merovingio92]

Grazie Criric! :fonzie: I tuoi sono ottimi spunti anzi mi hai dato praticamente già un menù... GRAZIEEE!
Ora vedo cosa utilizzare delle animazioni che mi hai dato. In effetti ne perdo come animazione in entrata ma visto che è per cellulari non mi interessa molto.
Alla prossima :byebye: