Nel post di oggi vediamo come affrontare un problema abbastanza comune: evitare che il caricamento dinamico di una pagina mostri all’utente dati “vecchi”.
Lo scenario tipico è il seguente: da un elenco elementi (listview) clicco su un elemento e ne mostro i dettagli. In questo scenario ho due pagine jQM:
- elenco prodotti: popolato dinamicamente con una chiamata rest o altro
- dettaglio prodotti: pagina con DIV relativi alle informazioni sull’elemento popolati dinamicamente tramite javascript
La versione naif, in qualche modo “suggerita” da jQM è quella di inserire come link dell’elemento l’hash della pagina di dettaglio, utilizzando come parametro l’ID dell’elemento. In questo modo tuttavia il workflow che ne risulta è questo:
- Cambio pagina
- Mostro icona caricamento
- Carico i nuovi dati
- Nascondo icona caricamento
L’effetto finale è piuttosto bruttino perché al primo caricamento appare una pagina vuota con i dati che pian piano si caricano, al secondo ancora peggio compaiono i dati vecchi finché non ho caricato i dati nuovi.
Come se ne esce? La versione ottimizzata del workflow è questa:
- Mostro icona caricamento
- Carico i nuovi dati
- Cambio pagina
- Nascondo icona caricamento
Notate come il cambio pagina sia passato dalla posizione 1 alla 3, quando ho i dati già pronti e inseriti nel DOM.
Di seguito l’esempio pratico:
Puoi proseguire la tua lettura con altri articolo sull’argomento: Sito mobile, app html5 o nativa e La tua app è lenta? Forse hai il freno a mano tirato.