Preload et cache du navigateur

bonjour à tous,

ma question est toute bête :

En prenant l'exemple d'une image, est ce la même chose de dire qu'elle est dans le cache du navigateur et qu'elle est pré loadée (elle n'apparait évidemment pas à l'écran)

Merci d'avance si vous pouvez me répondre.

Oui, c'est pareil, en fait un preload d'image met dans le cache l'image
Tout élément image/css/... (élément qui peut être mis en cache) lorsqu'il est affiché est mis dans le cache.

Merci beaucoup olivier

C'est cool çà me fait une méthode de preload d'image en css avec la propriété background-image.

Elle est présentée dans les tutos d'alsa
Enfin, je crois !
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-prechargement-d-image-preload-sans-javascript

non non ce n'est pas celle là, je la connaissais et ce qui me génait c'est que ca intervenait dans le body du document.


dans mon cas non car j'utilise un élément quelconque présent de toute façon sur la page et qui n'a aucune propriété concernant le background.

Par exemple

<p id="toto">...</p>

et

#toto {
background-image:url(img_a_preloader.jpg) no-repeat 200cm;
}

Modifié par clb56 (11 May 2005 - 16:25)

Awé j'avais de mauvais souvenir du tuto, bah il est pas top le tuto en fait

J'aurais fait comme toi.

Bah Raphaël, c'est quoi ça ??? !

Faudrait corriger Parceque introduire des images juste pour le preload, c'est limite

Voici ma version d'un préload en CSS :

#header h1 { 
   background: transparent url(images/hover.jpg); /* preload image */
   width: 700px; 
   height: 184px; 
   padding: 0; 
   margin: 0; 
}

#header a { 
   display: block; 
   background: transparent url(images/logo.jpg) top left no-repeat; 
   width: 700px; 
   height: 184px; 
   padding: 0; 
   margin: 0; 
   text-decoration: none; 
}

#header a:hover { 
   background: transparent url(images/hover.jpg); 
}

à stéphan,

oui effectivement dans le cas que tu décris (une photo cache l'autre je pense) ça fonctionne très bien aussi.


Une petite question subsidiaire,

si on code ainsi

css

#toto {
background:url(bgtoto.jpg);
}

et html

<img src="une_image.jpg" alt="texte de remplacement" />
<p id="toto">...</p>

Quel sera l'ordre des opérations ?

Est ce qu'il faut que bgtoto.jpg soit chargée avant que une_image.jpg commence à se charger ou est ce le contraire ?

Parce que si on est dans le deuxième cas ça peut être très intéressant pour une série de photos

Arfff... J'ai pas le temps de répondre, il faut que je me sauve.

http://openwebgroup.eu.org/articles/cascade_css/

clb56 a écrit :
Par exemple

<p id="toto">...</p>

et

#toto {
background-image:url(img_a_preloader.jpg) no-repeat 200cm;
}

Ouaip, sauf que IE6 (et d'autres certainement) ne charge pas le background dans ce cas là.
D'où la nécessité d'utiliser une vraie image <img>.

a écrit :
oui effectivement dans le cas que tu décris (une photo cache l'autre je pense) ça fonctionne très bien aussi.

Oui, voir la seconde méthode ici :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript
Modifié par Raphael (11 May 2005 - 18:14)

Raphael a écrit :


Ouaip, sauf que IE6 (et d'autres certainement) ne charge pas le background dans ce cas là.
D'où la nécessité d'utiliser une vraie image <img>.

Sérieux ??
Pourtant dans les techniques de roll over avec image unique, c'est le principe utilisé et IE réagit bien, sauf sous Win98 je crois.

Raphael a écrit :

Ouaip, sauf que IE6 (et d'autres certainement) ne charge pas le background dans ce cas là.

Sauf que ma question de départ partait justement du constat que dans le cas de l'utilisation de cette technique l'image était bien intégrée au cache.

Et ce test je l'avais fait avec IE6, donc pas de problème de ce coté là.

En fait je l'ai fait avec IE parce que je n'ai pas réussi à trouver le dossier cache pour firefox


Et pour l'histoire de l'ordre des downloading vous avez des indications ?

clb56 a écrit :
Et ce test je l'avais fait avec IE6, donc pas de problème de ce coté là.

Oui, sur WinXP je suppose (en tout cas pas sur 98)

Pour l'ordre des opérations, voir le très bon lien de Stephan. Il explique les choses.

Raphael a écrit :


Pour l'ordre des opérations, voir le très bon lien de Stephan. Il explique les choses.

J'ai du mal formuler ma question je pense car je ne parlais pas du tout de l'ordre de priorité des propriétés de style établi par le principe de la cascade. Mais plutôt de l'ordre des opérations de téléchargement physique du serveur vers le client.

clb56 a écrit :

Mais plutôt de l'ordre des opérations de téléchargement physique du serveur vers le client.

bah... Je pense que c'est simplement le flux courant du fichier HTML.
Premier tag arrivé, premier servi

Il faut aussi prendre en considération le style déclaré directement dans le HTML :

<p style="background-image: url(images/picture.jpg);">...</p>

Openweb a écrit :

<p style="..."> : 1000 (attribut HTML style qui ne sera supplanté que par un style utilisateur normal) ;

Bonjour,

clb56 a écrit :
...je n'ai pas réussi à trouver le dossier cache pour firefox

Tu devrais trouver cela chez chevrel; une FAQ proposée par firefox.

Raphael a écrit :
Oui, sur WinXP je suppose (en tout cas pas sur 98)

Je viens de réaliser un test avec IE5 environnement window98 et désolé de te contredire mais celà fonctionne parfaitement.

clb56 a écrit :


Je viens de réaliser un test avec IE5 environnement window98 et désolé de te contredire mais celà fonctionne parfaitement.

Sur ta config de test peut être mais pas sur d'autres qui auront quasiment les mêmes versions logiciels.

Les rollovers avec image unique ont aussi tendance à poser des problèmes sous certaines configs WinXP SPx + IE6.x (images clignotantes), c'est une vrai calamité pour corriger ça en plus.

Enfin bref la gestion des images de fond sur environement Windows et IE posent souvent des problèmes, que ce soit pour le pre-chargement ou pour le changement de position.