IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Préchargement images en cache avec firefox


Sujet :

JavaScript

Vue hybride

rebirth03 Préchargement images en cache... 02/08/2009, 11h09
rebirth03 Voici les informations... 02/08/2009, 13h46
rebirth03 Autre remarque: si je mets... 02/08/2009, 15h32
Auteur bonjour, déjà : <body... 03/08/2009, 10h42
rebirth03 Merci Auteur, j'ai modifié le... 03/08/2009, 20h51
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 19
    Par défaut Préchargement images en cache avec firefox
    Bonjour,

    je rencontre un problème avec firefox sur le pré-chargement en cache d'images, ou plutot sur la non utilisation par firefox de ces images en cache par la suite.

    Commencons par le code partiel du <head>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php 
    session_start();
    header("Cache-Control: max-age=3600");
    ?>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="fr" />
      <link rel="stylesheet" type="text/css" href="style.css" />
    puis le javascript dans le head

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
     
      <script type="text/javascript">
      //<![CDATA[
    var TabV10m = new Array('http://www.xxxxxx.com/Rtavn008.png','http://www.xxxxxx.com/Rtavn068.png','http://www.xxxxxx.com/Rtavn128.png');
        var imgObjV10m = new Array(TabV10m.length);
        var loaded = 0;
     
        function imgLoaded()
        {
          loaded++;
          if (loaded == TabV10m.length)
          {
            document.getElementById("loader").style.color = "white"; // masque un message "mise en cache en cours"
          }
        }
     
        function preloader() 
        {
          var i;
     
          document.getElementById("loader").style.display = "inline"; // Affiche un message "mise en cache en cours"
     
          for (i=0; i<TabV10m.length; i++)
          {
              imgObjV10m[i] = new Image();
              imgObjV10m[i].onload = imgLoaded;
              imgObjV10m[i].onerror = imgLoaded;
              imgObjV10m[i].onabort = imgLoaded;
              imgObjV10m[i].src = TabV10m[i];
          }
       }
     
        // Affecte l'objet image n° sSelect à afficher dans image1 qui est l'img visible de la page
        function request(sSelect)
        {
            document.getElementById('image1').src = imgObjV10m[sSelect].src;
        }
      //]]>
      </script>
    </head>
     
    <body onload="javascript:preloader();">
    .....
          <div id="loader"><p style="text-align: center;font-size: 10px;">Mise en cache des images ...</p></div>
          <a href="#" ><img id="image1" src="url_image_par_defaut" width="750px" height="600px" alt="Donn&eacute;e indisponible"/></a>
    ....
    Voila donc les principaux morceaux de codes.

    En fait, tout semble fonctionner sans erreur avec IE ou firefox, seulement:

    avec IE une fois la mise en cache terminée, les images s'affichent instantanément lorsqu'elle sont demandées (via un onmouseover sur un lien)

    avec firefox: les images sont demandées au site distant sans passer par le cache : affichage furtif du http://xxxxxxx.com/image.png cela se traduit par une lenteur lorsque la souris passe sur plusieurs liens "onmouseover" rapidement. et si je coupe la connexion internet, les images ne sont plus affichées alors qu'elles sont en cache...

    je vous invite à tester avec IE puis firefox ma page : test gfs

    Attendez la fin de mise en cache puis passez rapidement la souris au dessus des liens contenant des nombres et comparez entre IE et firefox

    Comment utiliser le cache avec firefox ?

    Merci pour votre aide

  2. #2
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 19
    Par défaut
    Voici les informations données par firefox sur une des images à mettre en cache:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    Titre: non spécifié
    Texte alternatif: Donnée indisponible
    Type: image/png
    Source du cache: cache disque
    Taille: 0ko
    Expire le: pas de date d'expiration
    Dimensions spécifiées: 750px x 600px
    Dimensions réelles: 0px x 0px
    Les points en gras m'interpellent: pourquoi une taille/dimension à zéro, et pas de date d'expiration, une incidence sur l'utilisation du cache ?
    Peut être est-ce lié au New Image() ?

  3. #3
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 19
    Par défaut
    Autre remarque: si je mets firefox en mode "travailler hors connexion", là pas de problème, les images s'affichent très rapidement comme avec IE7.

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    déjà :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <body onload="javascript:preloader();">
    supprime le terme javascript. Après un événement c'est toujours du javascript, donc inutile de le préciser.

    Dans ta fonction preloader essaye cette syntaxe (sans garantie)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    imgObjV10m[i] = new Image();
    imgObjV10m[i].onload = function(){imgLoaded()};
    imgObjV10m[i].onerror = function(){imgLoaded()};
    imgObjV10m[i].onabort = function(){imgLoaded()};
    imgObjV10m[i].src = TabV10m[i];
    En ce qui me concerne, je n'ai pas remarqué de lenteur particulière sur FF.

  5. #5
    Membre averti
    Inscrit en
    Mars 2005
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 19
    Par défaut
    Merci Auteur, j'ai modifié le code en suivant tes conseils.

    J'ai fait le test sur un autre ordi et pas de souci de lenteur avec firefox, qui est même plus rapide que IE6 à afficher les images.

    Bref, ça fonctionne ! Il semblerait que firefox ait simplement un peu de mal à tourner sur mon autre PC muni d'un "vieux" Athlon 2600 et ... de Vista

    Encore merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. image se déplace avec firefox mais pas avec ie6
    Par keokaz dans le forum jQuery
    Réponses: 1
    Dernier message: 17/10/2010, 21h45
  2. Pb de cache avec FireFox
    Par MayOL69bg dans le forum Langage
    Réponses: 10
    Dernier message: 04/04/2007, 16h50
  3. Réponses: 1
    Dernier message: 12/01/2007, 11h20
  4. Mon CSS joue à cache cache avec firefox
    Par lodan dans le forum Mise en page CSS
    Réponses: 30
    Dernier message: 02/11/2006, 16h21
  5. Décalage de l'image de fond avec firefox
    Par raphio000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 03/08/2006, 00h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo