title-article
Ottimizzare i cambi di pagina con jQuery Mobile
mobimentum

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:

  1. Cambio pagina
  2. Mostro icona caricamento
  3. Carico i nuovi dati
  4. 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:

  1. Mostro icona caricamento
  2. Carico i nuovi dati
  3. Cambio pagina
  4. 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.