Lenteur d'accès aux images en cache sous Chrome à partir de jquery

[Astarion]

Bonjour à tous,

Me voila confronté à un problème auquel j'ai du mal à trouver une explication et encore moins une solution...

Sur une page de mon jeu, une requêtes Ajax (avec jquery) appel un script php qui va charger la carte de manière asynchrone.
La carte est plutôt imposante (1360 cases) mais l'ensemble est optimisé et coté serveur ça ne prend que 100ms à s'exécuter.
Coté transmission des données, c'est plutôt bien aussi, en 10ms tout est réceptionné coté client mais le problème commence lorsqu'il faut faire appel aux images en cache et là, sous Chrome, ça prend ... 1min30 iffle:

Sous IE et FF, aucun problème la récupération des images en caches est instantanée, mais sous Chrome c'est la cata ...

J'ai testé sans passer par une requête Ajax et donc en chargeant directement la carte dans la page php.
On y perd un peu en temps de chargement de la page (normal), mais on à pas le blocage du au cache de Chrome.

Je me demande donc si le soucis ne vient pas du fait que dans le cas de l'appel Ajax, c'est jquery qui est l'initiateur des requêtes au cache et que c'est là qu'il y a blocage ?


Si je veux passer par une solution asynchrone, c'est pour gagner un peu en temps d'affichage de la page, mais je ne pourrai garder cette solution que si je peux corriger ce problème avec Chrome...

Je suis preneur de toutes explications ou solutions !
Merci d'avance

[Holy]

Ta page php, appelée par ta requête AJAX, renvoie une image c'est bien ça ? Tu as bien modifier l'header de ta page pour notifier que cette image devait être mise en cache ? Par défaut les images générées dynamiquement par PHP ne sont pas mises en cache par les navigateurs.

Si tu pouvais montrer ton script aussi (côté serveur & côté client), ça aiderait un peu (pas besoin de tout le détail). On manque un peu d'info pour t'aider en l'état.

[Astarion]

Pas tout à fait, ça revoit un emboîtement de <div> avec des images en background qui sont déjà en cache (dixit mon débogueur).

Pour le code, en simplifier ça ressemble à ça :

Pour l'appel :

Code :

<script type="text/javascript">
(function($){

    $.ajax({
        type: "POST",
        async: true,
        url: "application/core/CartePage/load_map.php",
        success: function(msg){

            $('#map_content').html(msg);
            $('#map_content').show();
            $('#map_loader').hide();
        }
    });
})(jQuery);
</script>

Et la réponse serveur (Je vous épargne tout les calculs et un maximum de détails) :

Code :

<?php

/* ... */
for($y=0; $y<$this->data['taille_y']; $y++)
{
    for($x=0; $x<$this->data['taille_x']; $x++)
    {
        $url = "url-de-mon-image.png";
        $posX = $x;
        $posY = $y;

        ?>
        <div
            id='case_<?php echo $x."_".$y; ?>'
            class='case <?php echo $this->data['cases'][$x][$y]['block']; ?>'
            style='top:<?php echo $posY; ?>px; left:<?php echo $posX; ?>px; background: url("<?php echo $url; ?>");'
        ></div>
        <?php
    }
}

J'ai mis une URL fixe ici, mais la génération est dynamique et j'ai pas loin de 70 skins de case différentes.

[Holy]

T'es sûr que c'est un soucis d'images et pas plutôt de freeze d'insertion massive de contenu html ? Essaie de virer le background-image de tes div en mettant simplement un background-color à la place, on pourra être sûr que le problème vient bien des images.

[Astarion]

De prime abord, j'avais aussi pensé à un freeze du à l'insertion massive d'html, mais quand je supprime le background-image, la map se load instantanément...
Et le débogueur est assez éloquent sur le temps d'acquisition des images depuis le cache ... (C'est d'ailleurs pas tant le chargement de l'image qui prend du temps, mais plutôt le délai entre deux requêtes vers le cache qui me semble extrêmement long oO)

---

Plutôt éloquent :o

[Ter Rowan]

elles font combien tes images ? Si tu utilisais plutôt des sprites, ça te ferait moins d acces

[Sephi-Chan]

J'avoue ne pas comprendre le bug, mais il paraît évident que tu dois utiliser des sprites CSS.

[Astarion]

Elles font 7ko chacune à peu près...
Oui pour les sprites css, j'y avais pensé, mais vu le nombre de possibilité d'images (175 skins differents), j'étais moyen chaud pour me taper le calcul de chacune des positions... (surtout que je suis en isométrique et que la plupart des images n'ont pas la même taille et ont donc des offsets différents ...)

Si j'ai pas d'autres choix j'y passerai, mais je pige pas pourquoi en synchrone c'est instantané et que j'ai autant de problème en asynchrone (et uniquement sous Chrome, même sous IE (8) ça fonctionne, c'est le comble :o)

[Sephi-Chan]

Si 2 images séparées pèsent 7 ko chacune, l'image qui combine les 2 pèseront peut-être 10 ko seulement. Quand bien même, ça restera toujours plus efficace pour le navigateur ET l'utilisateur.

Il existe des générateurs de sprites qui font le boulot pour toi. Tu as juste à leur donner une archive ZIP et ils te créent l'image et la feuille de style (ils définissent les classes selon le nom de chaque image).

[Astarion]

Interessant ce générateur, faut que je regarde de plus près, merci