Afficher un "loader" pendant le chargement de la page
Couiiiin ! Hello !
Une page index.php avec une partie haute ou dira des boutons de menu, et en dessous une div conteneur, servant à afficher les résultats, appelés via une requête AJAX.
Tout fonctionne mais pour un des menus, la requête est assez longue.
En effet, les infos générées sont sous forme d'une liste de titres, dont on regarde combien de fois ils ont été inscrit en tant que programmation normale dans la table "playlist", combien de fois ils ont été inscrits en tant que bonus, leur bpm, durée, et bac (style musical).
La table a les colonnes suivantes :
id (on dira numéro de ligne, en auto-incrément).
titre
bpm
duree
bac
bonus
partie (l'émission se fait en général en 2 parties).
track (numéro de piste de l'émission).
theme (Thème de l'émission, par exemple une spéciale remixes, etc etc)
datepl (date de la playlist)
ep (épisode, pour numéro chaque émission)
La table a actuellement quelque chose comme un peu plus de 1800 lignes.
Voici la requête :
Code:
1
2
3
4
| SELECT id, bac, duree, bpm, titre AS titrecnt,
(SELECT COUNT(id) FROM playlist WHERE titre LIKE titrecnt AND bonus = 0) AS pl,
(SELECT COUNT(id) FROM playlist WHERE titre LIKE titrecnt AND bonus = 1) AS bonus
FROM playlist GROUP BY titre ORDER BY titre ASC |
Il faut compter une dizaine de secondes afin que les premières données commencent à s'afficher, et environ 5 secondes supplémentaires pour que la page soit vraiment disponible (prête à effectuer d'autres opérations sur la liste de résultats). Bon c'est un peu long donc du coup je mets un gif animé en tant que loader, sous forme de div cachée dans la page index et que j'affiche avant la requête AJAX.
Le souci c'est que le gif animé freeze et au bout d'une dizaine de secondes, j'ai un message de firefox "Une page web ralenti le navigateur blablabla".
Ca fini par se débloquer et les données apparaissent, mais je ne sais pas comment éviter ca.
Le serveur est un Xeon 3 GHz en linux , habituellement très rapide (bien plus que WAMP Server à l'époque sur la même machine) avec 4 Go de RAM, le poste client est un i3 3,3 GHz avec 8 Go de RAM.
La fonction javascript (simplifiée) appelée par le bouton pour lister les titres :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // Statistiques
function stats(sortbyfield,sortbyorder) {
document.getElementById('playlistdatas').style.display = 'none'; // div où sont affichée les données
document.getElementById('divchargement').style.display = 'inline'; // div pour afficher le loader avec le gif animé
$.ajax({
type: 'POST',
url: 'stats.php',
data: {sortbyfield:sortbyfield, sortbyorder:sortbyorder },
success: function(data){
$("#playlistdatas").html('');
$('#playlistdatas').append(data);
document.getElementById('divchargement').style.display = 'none';
document.getElementById('playlistdatas').style.display = 'inline';
}
});
} |
La page stats.php contient en autres , la requête citée en début de post.
Y a-t-il une manière plus propre et surtout moins gourmande de faisable ?
Merkouin :D
