Chargement page coté navigateur trop long

Bonjour,

j'ai programmé un petit jeu sur lequel j'ai une grille de 8000 cases à afficher avec une requete (qui fonctionne bien) pour savoir pour chaque case si elle a été retournée ou pas. Tout ceci marche très bien, ma programmation fonctionne.

Par contre je fais une boucle 8000 fois pour afficher ou non ma case. Mais mon fichier final envoyé du serveur php au navigateur fait 1Mo (8200 lignes au final) et ma grille fait comme un chargement de 10 à 40 secondes suivant si j'utilise FF ou IE (10 secondes sous ie et 30 à 40 sous FF3)

Voici le code de ma boucle :

<?php
for ($j=0;$j<$ligne;$j++){
    $id_case = mysql_result($resultat,$j,'id_case');
    $id_client = mysql_result($resultat,$j,'id_client');
    if ($id_client == '0'){
    ?>
        <a href="index.php?num_case=<?php echo $id_case; ?>">
        <div class="caseGrille"></div>
        </a>
        <?php
    }else{
        echo "<div class='caseGrilleUtilisee'></div>";
    }
}
?>

je me posais la question de savoir s'il y avait moyen de contourner le fait que ça rame (comme par exemple utiliser flash, mais le problème de boucle flash est le meme non ? Ou de précharger ?)

merci si quelqu'un a une solution potentielle
cordialement

chalex

Utilise AJAX : tu télécharge la page une fois, du javascript créé les cases puis effectue une requête vers le serveur à chaque changement de la grille pour obtenir le nouvel état à afficher (code par exemple dans une chaîne de caractères "0111010100000111..."), tu n'as plus que 8000 caractères à télécharger, soit 8ko
Et si tufais un codage sur 1 bit tu code l'état de 8 cases sur chaque octet de ta chaine et tu n'as plus besoin que de 1000 caractères.
Ensuite les cases seront mises à jour par du javascript.

Flachy Joe

@flashy
Et si tufais un codage sur 1 bit tu code l'état de 8 cases sur chaque octet de ta chaine et tu n'as plus besoin que de 1000 caractères.
=> heu, je n'ai pas compris là

tu n'as plus que 8000 caractères
=> un ti peu plus quand même hein, ... ok, je titille :)

C'est une très bonne solution que tu proposes mais elle est sans doute améliorable, parce que 8...10 Ko c'est à la fois peu et beaucoup.
Peut être y a t il moyen de n'envoyer que la ligne modifiée, voir la case (style :  ligne 123, col 27), voir en codant en hexa. Mais gaffe à ce que le code JS ne fasse pas ramer la machine du client.

Chalex :
combien de colonnes / lignes as tu ?
Tu peux en dire plus sur le but du jeu et son déroulement ?
N'hésite pas à poster ton code.


Cordialement,


Kohntark -

Bonjour,

avant de répondre, je vous remercie de vous occuper de mon cas (quoi qu'il en soit, je testerai des solutions ce soir)

Comment fonctionne le jeu (pour simplifier je vais dire qu'il n'y a qu'une grille de 8000 case) :
dans ma table grille j'ai :
id_case(de 1 à 8000) | id_client (état 0 ou 1, 0 par défaut si case pas cliquée)
ceci me fait une table de 8000 lignes (1par case | je ne gère pas les lignes/colonnes) 

fonctionnement du jeu :
la grille est commune à tous les joueurs, si le joueur 121 clique sur la case 48, cette dernière ne sera plus visible par les autres joueurs (d'ou le besoin de rafraichir la grille completement entre chaque clique). Par contre si le joueur 54 ouvre ma page grille.php et qu'entre temps un autre joueur clique sur une case, il ne verra son action qu'une fois son clic(joueur54) effectué ou s'il recharge la page.

L'histoire des 00011100011000000000010010001 me semble pas mal, mais s'il y a 7000 chiffre 1 j'en reviens encore à un code de 7000 lignes uniquement en javascript ?

Le problème sera-t-il le même avec du flash ?
entre 1Mega et 10ko je préfère 10 ko...

chalex

bon, je réexpliqe, le javascript n'est pas sensé être écrit par le php :
1. Tu as 2 fichiers "affichage" et "traitement"
2. dans "affichage"
 Javascript :
 a. boucler pour créer 8000 cases en HTML
 b. demander à "traitement" la valeur des cases
 c. boucler sur le résultat de "traitement" pour modifier l'affichage des cases
3. dans "traitement"
  PHP :
  a. Boucler sur la base de donnée pour lister les valeurs des cases
  b. Retourner une chaine de caractère interprétable par le javascript

Et voila, tu n'as pas besoin d'une seul goutte de php dans a"ffichage" uniquement du html, du css et du javascript. De même tu n'as besoin de rien d'autre que du php dans traitement.

Et tu n'as même pas besoin de raffraichir toute la page pour modifier l'affichage, uniquement que le javascript refasse la demande et boucle à nouveau pour changer l'affichage. Tu économise la création des cases HTML.

Flachy Joe

@kohntark
Chaque case n'a que 2 état possible : 0 ou 1 or chaque caractère de la chaîne fais 1 octet, soit 8 bits donc on peut y coder l'état de 8 cases.
Exemple :
le caractère 'a' vaut '97' en code ascii décimal soit "1100001" en binaire, on voit bien là l'état de 8 cases...

Flachy Joe

@flachy
OK, c'est un peu plus clair mais je crains ne pas encore avoir bien saisi.
Pourquoi fais tu référence à l'ascii ??
Tu veux coder les cases avec une chaine ascii ?? Je me trompe peut être mais c'est ingérable.
Par exemple, comment fais tu pour représenter la 1ère case cochée (ou la 8eme selon le LSB) ?

Je reste sur mon codage en hexa qui selon moi est la meilleure solution.

Cordialement,

Kohntark -

... enfin, la meilleure solution reste les lignes / colonnes, car ça représente l'énorme avantage de n'envoyer qu'une trame "ajax" du style :  10.36 (ligne 10 colonne 36), soit 6 caractères max, qui ne concerne que la case modifiée
Inutile donc de laisser des ressources (PHP comme JS) à réécrire toute la grille, sans compter les conversions de base (bindec and Co)
C'est sans doute 100 fois plus rapide que les solutions ci dessus.


Kohntark -

Si j'ai bien compris :
1 - je fais ma grille avec toutes les cases à l'état 0 (case fermée) (avec mes div avec une boucle javascript ?)
2 - je lance mon ajax dans un <div id='recherche'> qui fait une boucle php des infos de ma base sur 8000 cases, j'en reçois : 1100000011010111011000010001... (soit 8000 0 ou 1).
3 - je décompose cette chaine tous les 8 caractères ce qui me donne 1000 octets que je mouline dans une fonction javascript (dans l'ajax?)
4 - je supprime grace à la fonction JS les cases qui sont à 1.

Dis moi si mon cheminement est bon, et dernière question j'utilise bindec comme fonction php pour découper ?

chalex

Kohntark : si chacun de mes div est du style :
<div id='case_n'> avec n incrémenté, ta solution peut fonctionner de récupérer seulement les id_client de ma table qui valent 1 dans un div ajax et de modifier l'apparence du div ?

Pour mieux expliqué
1 - je créer une grille remplie de <div id='case_n' style='width:5px;height:5px;background-image:url(url.jpg);'></div> de 5x5 px (cases remplies) en Javascript
2 - en ajax, je récupère mes numéros de case id_case où id_client == 1
3 - toujours en partant du fichier ajax je fait une sorte de :
<script type="text/javascript">
    document.getElementById("case_n").style.background = 'url(image_vide.jpg)'; <-- en envoyant ça dans ma grille
</script>


est ce que c'est aussi simple ? et ok la page téléchargée sera pas très grande, mais le fait de faire autant de javascript (création de 8000 cases pleines puis supprimer celles déjà utilisées) n'est pas trop lourd pour le client

merci en tout cas pour votre aide, ça m'ouvre plein de perspectives auxquelles je n'avais pas pensé !
chalex