Pr�chargement images en cache avec firefox

**rebirth03** · 02/08/2009, 11h09

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

**rebirth03** · 02/08/2009, 13h46

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() ?

**rebirth03** · 02/08/2009, 15h32

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.

**Auteur** · 03/08/2009, 10h42

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.

**rebirth03** · 03/08/2009, 20h51

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

Pr�chargement images en cache avec firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager