11550 sujets

JavaScript, DOM et API Web HTML5

Chargment page

Bonjour,
je vais essayer d'être le plus claire possible...

Voilà, pour le moment, je charge une page test.php avec un 'include' qui est une infime parti de mon index.php.

Mais mon test.php est assez lourd (liste de toutes les villes françaises via requete MySql).
En fait le chargement de mon index.php rame sur le chargement de cette page et donc le reste de la page ne se charge pas tant que test.php n'est pas chargé totalement.

Je voudrais en fait qu'au moment de charger cette partie de l'index, une barre de progression se mette en place et que le reste de l'index.php se charge...

En gros je veux que tout l'index.php et le test.php se charge en même temps,
pas que le début de l'index se charge, puis bloque sur test.php et reprenne le chargement de index.php...

Y aurait-il une solution en JS ou en je ne sais pas quoi pour arriver à mes fins ?

Deux jours que je galère sur Google et je n'ai rien eu de concluant...

Merci
Salut,
As-tu regardé du coté des loaders jQuery ?
Je ne sais pas si tu y trouveras ton bonheur mais c'est ce dont je me sers pour charger mes images.
Donc pourquoi pas pour du php Smiley smile
Modifié par Fahrenheit (17 Oct 2011 - 17:42)
Bonjour,

Le problème de départ est clair mais la solution imaginée n'existe pas ou bien serait un cataplasme sur une jambe de bois. C'est un peu comme si tu avais un tuyau d'arrivée d'eau qui explosait, et qu'en attendant le plombier tu décidais de construire un mécanisme complexe avec des tuyaux d'arrosage pour évacuer l'eau dehors... au lieu de couper l'arrivée d'eau sur le robinet en amont.

Là, tu as un problème de performance qui vient du chargement d'une information très longue (gros contenu HTML), qui plus est généré à chaque requête HTTP avec l'interrogation d'une base de données. Donc deux points d'accroche:
1. Charger un contenu volumineux (genre quoi, 500ko de HTML?). Même si c'est instantanné, une telle quantité de HTML et la création des noeuds DOM correspondant va demander du temps de processeur au moteur de rendu du navigateur, et ça accroit les risques d'opérations qui prennent du temps lorsque tu modifies le DOM...
2. Générer ce contenu à chaque requête.

Le problème le plus simple à résoudre est le deuxième: tu peux faire un cache sur disque du résultat de ta requête MySQL (et de son traitement en PHP). Par exemple tu peux inclure "communes-fr.cache.html", et avoir un script "communes-fr.create.php" que tu exécutes tous les jours ou toutes les heures avec un cron job (ou une fois de temps en temps à la main, si ça change très peu ou si les mises à jour de la base se font à la main et rarement).

Pour le premier problème, soit une fois que tu as résolu le deuxième ça va déjà beaucoup mieux et le problème n'est plus sensible, soit ça reste assez lourd. Tu peux alors essayer d'optimiser le fonctionnement en ne chargeant pas une liste complète des villes, mais en découpant en des requêtes ou lots de données plus petits. Là ça dépend un peu de ce que tu fais. Si tu utilises un système d'autocomplétion qui se base sur les deux premiers caractères tapés, tu peux charger un fichier pré-compilé avec toutes les noms (et données associées) de villes commençant par ces deux lettres (ça fait potentiellement 676 fichiers, mais on peut découper autrement). Tu peux aussi faire des requêtes XHR à un script qui interroge la base de données. Il y a pas mal de stratégies d'optimisation possibles...
Le truc c'est que j'ai mis en place un système de SELECT où l'on choisit d'abord le département, et ensuite la ville...

En gros toutes les villes sont appelées dans le header comme ceci:

<script>

  var tb=new Array('Sélectionnez un département');
  var tbain=new Array("Ambérieu en Bugey","Ambérieux en Dombes","...");

if (valeur == "vide"){
var tableau=tb;}
else if (valeur == "ain"){
var tableau=tbain;}

for ( var i = 0 ; i < tableau.length ; i++) {
var elem=document.createElement('option');
elem.setAttribute('value',tableaux[i]);
var text = document.createTextNode(tableau[i]);
elem.appendChild(text);
document.getElementById('vivile').appendChild(elem);
}
}
</script>


et mis en page comme cela :

<form method="get" action="station.php">
Par ville 

<select id="region" name="region" onChange="choix(this)">
	<option value="vide">Sélectionnez un département</option>
        <option value="ain">1-Ain</option>
</select><br>
	<select name="station" id="vivile">
	</select><input type="submit" name="send" value="Go" />
</form>


Où sinon est-il possible de faire une requête de la base ou d'un fichier ne concernant que le département concerné ?[/i][/i]
powpowland a écrit :
Où sinon est-il possible de faire une requête de la base ou d'un fichier ne concernant que le département concerné ?

Oui, c'est la piste à suivre je pense. Lorsque l'utilisateur choisit un département, tu lances aussitôt une requête XHR pour récupérer un fichier JSON avec la liste des villes, et tu génères les éléments OPTION pour ton SELECT à partir de ces données JSON dès que tu les as récupérées.

Dans l'idéal, les fichiers JSON seront des fichiers statiques générés par du code PHP invoqué par un cron job. Les requêtes HTTP des utilisateurs (et donc tes requêtes XHR) n'ont ainsi pas besoin d'interroger la base de données.

Par contre il faudrait dans l'idéal réfléchir à un fonctionnement sans JavaScript (champ texte libre pour la ville?).
Sujet clos
Aller à