Performances JQueryMobile

Bonjour,

Je me retrouve avec un problème de performances en utilisant JQueryMobile.
Sur la page d'accueil de mon application web, je charge une liste d'éléments depuis une base de données SQL en utilisant une boucle while (php).
Etant donné qu'il y a plus de 600 éléments, ma page met une éternité à s'afficher, faisant même parfois planter le navigateur.

Existe-il une solution pour afficher une telle liste rapidement, sachant que j'utilise l'attribut data-filter=true sur mon <ul> pour que l'utilisateur puisse filtrer les éléments de la liste. Ce qui signifie qu'ils doivent être présents dans la page.

Merci d'avance

600 éléments c'est trop.

Cela nuit probablement déjà à :

- La lisibilité pour l'utilisateur.

- Le temps de chargement (imagine si ton utilisateur est en "edge" au moment du chargement...).

Préfère un bouton "plus de résultats" chargeant la suite des résultats en ajax. Ou le faire sur plusieurs pages et dans ce cas renseigne toi du coté du pré-chargement des pages.

Sinon propose un chargement de la liste "après" le clic sur le choix du tri, dans ce cas tu a des requêtes avec des contraintes différentes mais aussi et surtout moins de résultats, plus pertinents.
Modifié par La_Memoire (22 Mar 2013 - 11:06)

Hello,

je ne suis pas dév mais ai pu bosser sur une appli récemment. Nous avons rencontré ce genre de problème & plutôt que de faire une requête mysql nous avons parser le tout en JSON nettement plus rapide. Peut-être cela te seras utile.

Ju

Merci de votre aide,

Effectivement c'est bien ce que je pensais. J'ai cherché différentes solutions pour avoir un "infinite scroll" à la manière de Facebook ou Twitter qui ajouterais automatiquement 10 éléments quand on arrive en bas de page mais malheureusement je n'y suis pas arrivé (je ne suis pas développeur non plus).

Enfaite pour récupérer mes éléments de liste, j'utilise cette méthode PHP toute simple :

<ul data-role="listview" data-filter="true" id="liste">
<?php 
      //Requête globale
     $requete= $base->query('SELECT * FROM mabase ORDER BY titre');
				 
    while($donnees = $requete->fetch()) { ?> 
	<li data-filtertext="<?php echo $donnees['titre']; ?>">
	     <a href="detail.php?id=<?php echo $donnees['id']; ?>">
	          <h3><?php echo $donnees['titre']; ?></h3>
		  <span class="ui-li-count"><?php echo $donnees['numero']; ?></span>
	     </a>
	</li>
	<?php
	}
							
	$requete->closeCursor();
				
	?>
</ul>

Ce qui me retourne environ 600 éléments de liste. Puisque j'utilise l'attribut data-filter="true", il faut que toutes les informations soient dans le DOM de la page pour effectuer le filtre de recherche. Est-il possible de n'afficher que les 10 premiers résultats et de masquer les 590 autres ? Puis en cliquant sur un bouton "Plus de résultats" on en affiche 10 de plus et ainsi de suite jusqu'à la fin ?

Cela ne corrige en rien ton souci de plantage de navigateur si tu "cache" uniquement.