Préchargement des pages
Habituellement, c'est une bonne idée de stocker les pages de votre application dans plusieurs modèles de pages uniques au lieu d'un grand modèle multi-page. Ceci permet de minimiser la taille DOM de la page.
Lors de l'utilisation de modèles de page unique, vous pouvez précharger les pages dans le DOM afin qu'elles soient disponibles instantanément lorsque l'utilisateur les visites. Pour précharger une page, ajoutez l'attribut data-prefetch au lien qui pointe vers la page. jQuery Mobile charge ensuite la page cible en arrière-plan après que la page principale ait été chargée et l'événement pagecreate est déclenché . Par exemple :
<a href="prechargerCettePage.html" data-prefetch> ... </a>
Vous pouvez précharger autant de pages liées que vous le souhaitez. Il suffit d'ajouter data-prefetch pour tous les liens que vous souhaitez précharger.
Alternativement, vous pouvez précharger une page par programmation en utilisant $.mobile.loadPage():
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
Un autre avantage du préchargement d'une page, est que l'utilisateur ne verra pas le message de chargement Ajax lorsqu'il visitera la page préchargée. Le message de chargement Ajax ne s'affichera que si le framework n'a pas terminé le préchargement de la page au moment où le lien est suivi.
Le préchargement des pages crée naturellement des requêtes HTTP supplémentaires et utilise la bande passante, il est donc sage d'utiliser cette fonction que dans des situations où il est très probable que la page préchargée sera visitée. Un scénario courant est une galerie photo, où vous pouvez précharger les pages de photos "précédent" et "suivantes" afin que l'utilisateur puisse se déplacer rapidement dans l'album photos.
Gestion de la taille du DOM
Pour que les transitions animées entre pages puissent fonctionner correctement, les deux pages (page d'origine et page de destination) ciblées par la transition doivent être présentent dans le DOM. Cependant, en conservant les anciennes pages dans le DOM, celles-ci vont rapidement remplir la mémoire du navigateur, et peuvent ralentir voire même faire planter certains navigateurs pour mobiles.
Pour contrer ce type de problème jQuery Mobile dispose d'un mécanisme simple pour garder le DOM en ordre. Chaque fois qu'il charge une page via Ajax, jQuery Mobile marque la page pour qu'elle soit retirée du DOM lorsque vous naviguerez en dehors d'elle plus tard (techniquement, sur l'événement pagehide). Si vous revisitez une page retirée, le navigateur sera en mesure de récupérer le fichier HTML de la page dans son cache. Si non, il récupérera le fichier depuis le serveur. (Dans le cas de vues de listes imbriquées, jQuery Mobile supprime toutes les pages qui composent la liste imbriquée une fois que vous accédez à une page qui ne fait pas partie de la liste.)
Les pages à l'intérieur d'un modèle multi-pages ne sont pas affectées par cette fonction - jQuery Mobile supprime uniquement les pages chargées via Ajax.
Mise en cache des pages dans le DOM
Si vous préférez, vous pouvez dire à jQuery Mobile de conserver les pages visitées précédemment dans le DOM au lieu de les retirer. Cela permet aux pages de rester dans le cache afin qu'elles soient instantanément disponibles si l'utilisateur retourne vers elles.
Pour conserver toutes les pages visitées précédemment dans le DOM, définissez l'option domCache sur le plugin de la page sur true, comme ceci :
$.mobile.page.prototype.options.domCache = true;
Sinon, pour mettre en cache une page en particulier, vous pouvez ajouter l'attribut data-dom-cache="true" au conteneur de la page :
<div data-role="page" id="cacheMe" data-dom-cache="true">
Vous pouvez également mettre en cache une page par programmation comme ceci :
pageContainerElement.page({ domCache: true });
L'inconvénient de la mise en cache dans le DOM est que le DOM peut devenir énorme, provoquant ainsi des ralentissements et des problèmes de mémoire sur certains appareils. Si vous activez la mise en cache DOM, prenez soin de gérer le DOM vous-même et testez le soigneusement sur un échantillon d'appareils.