Preload en CSS ?
Preload en CSS ? - HTML/CSS - Programmation
Marsh Posté le 04-09-2003 à 11:38:52
drew avait posté un lien très interessant (la) : http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
Marsh Posté le 04-09-2003 à 11:58:53
Oui, c'est justement après avoir lu cette astuce que j'ai pensé à faire un preaload pour n'importe quelle image et pas seulement pour les menus 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 17:58:57
Personne n'a jamais pensé à utiliser de preload en CSS ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 18:01:31
| SIBELIUS a écrit : Personne n'a jamais pensé à utiliser de preload en CSS ? |
ben ca marche ou pas ton astuce ? ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 04-09-2003 à 18:04:12
ben je ne suis pas sûr, vu que mes images sont en cache...
mais je vais virer les temporary files
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 18:12:38
cai vachement bien mais ca veut dire qu'il faut faire une classe par image 
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 04-09-2003 à 18:13:47
HotShot > peux-tu me dire quelle genre de technique tu utilises ?
Que veux-tu dire par "display ne joue pas" ? = je peux m'en passer ? Mais dans ce cas, les images vont s'afficher 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 18:15:42
| simogeo a écrit : cai vachement bien mais ca veut dire qu'il faut faire une classe par image |
Justement : que se passerait-il en déclarant une classe ainsi :
.preload {
background-image: url(image1);
background-image: url(image2);
background-image: url(image3);
background-image: url(image4);
background-image: url(image5);
display: none;
}
S'il lit les instructions ligne après ligne, il va bien charger TOUTES les images, non ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 18:18:04
chai po
ca me semble un peu goret .... mais si ca marche ![[:adsl1978]](https://forum-images.hardware.fr/images/perso/adsl1978.gif "[:adsl1978]")
a mon avis, il lit ligne par ligne ... mais il a pas le temps de charger la premiere qu'il passe à leuxieme .. etc .. jusqu'a la derniere qu'il va enfin charger, non ?
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 04-09-2003 à 18:29:35
| simogeo a écrit : |
Ah ouais, c'est tout de suite moins drôle vu comme ça 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 04-09-2003 à 22:13:11
Vous aurez peut-être l'inpressison que je rabâche mais vaut mieux éviter de toucher les image de fond avec les a:hover.
Sinon le preload CSS cest pour un menu en javascript ?
Marsh Posté le 04-09-2003 à 22:51:20
| fadenreturns a écrit : |
Non, justement se serait pour éviter tout javascript (un preload en js je sais faire )
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 01:15:27
HotShot > ok, oui je vois.
et d'après toi, comment serait interprêté ce genre de chose ?
.preload {
background-image: url(image1);
background-image: url(image2);
background-image: url(image3);
background-image: url(image4);
background-image: url(image5);
display: none;
}
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 01:21:36
Normalement si on suit les specs, seule la dernière propriété doit être prise en compte. Donc on peut déduire 2 comportements :
- Soit le navigateur les télécharges bêtement une par une, ne gardant en cache que la dernière.
- Soit le navigateur ne lance sa requête qu'une fois tous les styles calculés et donc ne télécharge que la dernière image.
Dans tous les cas, il y a de fortes chances que les autres images passent à la trappe. Il faudrait donc créer autant de classer que d'images à télécharger (c'est comme ça qu'avait, fait un mec dans un article sur le Web, le lien doit être dans les 1000 messages de la FAQ...)
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 05-09-2003 à 01:26:43
Ok, merci gm pour ces précisions
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 01:52:49
| gm_superstar a écrit : Normalement si on suit les specs, seule la dernière propriété doit être prise en compte. Donc on peut déduire 2 comportements : |
si c'est le 1er cas il est vraiment concon le navigateur, puisqu'il peut de ttes façons rien faire tant qu'il a pas parsé toute la feuille de style.
autre chose, y'avait pas un browser (je sais plus lequel) qui ne chargeait pas l'image si son display était à none?
---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Marsh Posté le 05-09-2003 à 01:56:28
l'astuce http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ est tres interessante 
---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Marsh Posté le 05-09-2003 à 02:05:15
the real moins moins >
| Anapajari a écrit en début de thread : drew avait posté un lien très interessant (la) : http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ |
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 02:10:39
| SIBELIUS a écrit : the real moins moins > |
oui oui, je confirmais que ct un chouette lien c tout
---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Marsh Posté le 05-09-2003 à 02:40:52
Toujours dans le même ordre d'idée, si je fais ça :
.image1 {
background-image:url(image1.gif);
display:none;
}
.image2 {
background-image:url(image2.gif);
display:none;
}
ET en début de partie <body> : <div class="image1 image2">votre navigateur ne supporte pas les CSS</div>
Est-ce que les deux images vont-elles se charger ?
(en testant, je ne vois qu'une seule image, cela veut-il dire que le première n'a pas été prise en compte?)
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 02:53:34
OK, donc je dois faire un div différent pour chaque classe :
<div class="image1"></div>
<div class="image2"></div>
...
C'est bien ça ?
Pourtant, mes images n'atterrissent pas dans mes temporary files... comment peut-on être sûr qu'elles vont dans le cache ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 08:56:36
C'est un topac intéressant, mais concernant le preload d'image, je trouve que pour une fois, le JS est pas mal, puisque ne pas précharger les images ne constitue pas un drame, mais juste un confort.
Tant qu'une chose n'est pas indispensable pour la navigation ou la lecture de l'info, le JS reste indiqué.
Maintenant, c'est clair que c'est toujours intéressant de chercher autre chose.
Marsh Posté le 05-09-2003 à 12:01:11
Bon, sur toutes ces considérations j'en aboutis à ça : http://www.alsacreations.com/articles/preload/
Est-ce que tout est correct ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 12:12:53
| SIBELIUS a écrit : Bon, sur toutes ces considérations j'en aboutis à ça : http://www.alsacreations.com/articles/preload/ |
ça marche bien, mais en y réfléchissant, cela ne me semble pas une tres bonne solution, car sémantiquement dans ta page, tes images existent bel et bien même si tu empêches leur affichage. Si tu utilises des vieux navigateurs ou encore des navigateurs en mode texte, on verras tes images, tandis qu'avec du JS elles seront simplement ignorées.
Il existe des situations ou le JS est préférable aux CSS, sisi... ![[:totozzz]](https://forum-images.hardware.fr/images/perso/totozzz.gif "[:totozzz]")
Marsh Posté le 05-09-2003 à 12:19:20
| Hermes le Messager a écrit : des navigateurs en mode texte, on verras tes images |
Humm, c'est possible ça ? (des images dans les navigateurs en mode texte 
)
Pour les vieux navigateurs, ouais en effet tu as raison mais je crois qu'il faut quand-même remonter loin.
Or il y'a plus de navigateurs sans js que de navigateurs sans css.
Mais la différence, c'est qu'en js l'image ne serait pas affichée contrairement qu'en css... en effet, c'est un peu gênant si on se soucie encore des navigateurs dinosaures.
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 12:24:39
| SIBELIUS a écrit : |
Ben, l'image ne sera pas affichée, mais signalée en tout cas (enfin j'imagine). Et pour les aveugles qui consulteront ton site, c'est pareil en théorie.
| Citation : Or il y'a plus de navigateurs sans js que de navigateurs sans css. |
Oui, mais c'est pas le problème, parce qu'un préchargement d'image et optionnel, ce n'est pas déterminant pour le fonctionnement d'un site.
| Citation : Mais la différence, c'est qu'en js l'image ne serait pas affichée contrairement qu'en css... |
Et alors, où est le problème ? C'est mieux non ?
Marsh Posté le 05-09-2003 à 12:30:38
Oui, c'est mieux, c'est justement le problème... de ne pas trouver l'équivallent en CSS
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 13:27:35
... voire pour placer des mots-clés 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 13:46:29
attention certains navigateurs comme IE6 (hum) ne mettent pas en cache certains backgrounds CSS, comme par exemple ceux utilisés pour des :hover.
ça implique à chaque fois une requête supplémentaire au serveur (et un délai d'affichage).
donc je pense qu'un <img> avec display:none serait plus efficace techniquement (mais pas sémantiquement) qu'un <div>
| Anapajari a écrit : drew avait posté un lien très interessant (la) : http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ |
-r 
Message édité par dew le 05-09-2003 à 13:47:00
Marsh Posté le 05-09-2003 à 14:04:08
Hum hum, c'est bien ce que je me disais : l'image n'allait pas dans le cache dans mon IE6 
Donc la solution la moins pire serait d'utiliser la balise img.
Par contre, en spécifiant des tailles à zéro, elle ne devrait pas s'afficher dans les vieux navigateurs, non ?
<img src="image1.gif" width="0" height="0" style="display:none;" alt=texte alternatif"/>
... mais dans ce cas, le display: none est-il encore utile ???
Resterait à régler le problème des navigateurs-textes 
Message édité par sibelius le 05-09-2003 à 14:40:10
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 16:27:23
Les navigateurs textes n'affichent pas une image dont l'attribut alt est vide ( alt="" ) il me semble.
Sinon, si tu n'as pas trop d'images, tu peux mettre un attribut alt="Votre navigateur ne supporte pas les CSS".
Ou alors un :
<div class="cache">
Votre navigateur ne supporte pas les CSS.
Si des images s'affichent ci-dessous, nous vous prions de ne pas en tenir compte.
<hr />
<img src="URL" alt="" />
<img src="URL" alt="" />
<img src="URL" alt="" />
<img src="URL" alt="" />
</div>
div.cache {display:none}
Même si je pense que le JS serait tout de même plus adapté dans ce cas.
Message édité par meerthyl le 05-09-2003 à 16:28:58
Marsh Posté le 05-09-2003 à 17:03:21
Ah oui, voilà une alternative qui me plaît bien
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 05-09-2003 à 23:17:12
| Meerthyl a écrit : Les navigateurs textes n'affichent pas une image dont l'attribut alt est vide ( alt="" ) il me semble. |
Si, ils mettent un truc du style [image]
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 30-06-2005 à 01:33:02
Bonjours à tous, je reviens remettre sur le tapis cette belle invention de preload CSS.
J'ai tester beaucoup de possibilité dont celle qui ont déja été annoncer, mais cela ne veut vraiment pas marché.
j'ai ce probleme avec les smileys qui s'affiche 1 par 1. Pas tip top on devrai dire.
http://badze.free.fr/livreor/afficher_livre.php
Je n'est pas inséré ce systeme dans l'exemple donné, mais déja tester tout de meme .
Cher SIBELIUS, pourriez vous m'éclairé sur ce probleme ? ou dois je acheter le livre (ce que je ferai tres surement 
)
Merci.
Marsh Posté le 30-06-2005 à 01:39:26
Voila mon fonctionnement
Code :
|
Mais le truc est que mes smileys sont pratiquement en début de code. Donc cela doit jouer tout de meme.
Message édité par Badze le 30-06-2005 à 01:39:45
Marsh Posté le 30-06-2005 à 02:32:32
Bonjour,
badze, tu nas pas donné de dimension à tes images (sauf erreur)
Sibellius un truc qui marche :
<img src="image1.gif" width="1" height="1" alt="texte alternatif"/>
display:none empèche le préchargement sur Opéra et les Gecko
préférer un left négatif
Il y a un problème avec ie6/win98, les images d'arrière-plan et a:hover, j'en ai parlé ici :http://forum.hardware.fr/hardwaref [...] 4743-1.htm
Message édité par chimelpremier le 30-06-2005 à 02:35:51
Marsh Posté le 30-06-2005 à 07:45:19
Quelle est l'intérêt de préloader les images sans rollover? ![[:pingouino]](https://forum-images.hardware.fr/images/perso/pingouino.gif "[:pingouino]")
L'intérêt du preload c'est simplement de ne pas avoir de "trou" quand on affiche les images alternatives au moment du rollover
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Marsh Posté le 30-06-2005 à 09:17:36
Mais...le fait de précharger les images du site dès la page d'accueil va rendre le chargement des pages suivantes plus rapides.
Marsh Posté le 30-06-2005 à 09:21:44
| j_lecruel a écrit : Mais...le fait de précharger les images du site dès la page d'accueil va rendre le chargement des pages suivantes plus rapides. |
Heuu... bof quoi, ça va juste éviter de charger certaines images en allongeant proportionnellement le temps de chargement de la première page
Genre sur un site de 10 pages au lieu d'attendre 1s entre chaque page t'attend 10s pour la première
En plus vu la gestion du cache d'MSIE c'est même pas sûr qu'il y gagne
Et si le visiteur ne se ballade pas suffisament loin sur le site, tu lui auras fait charger 3 tonnes d'images qu'il n'a jamais regardées
C'est stupide
Message édité par masklinn le 30-06-2005 à 09:22:14
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Sujets relatifs:
- [CSS] newbie : Changer de style a un endroit precis [résolu]
- Tester un tuto : faire un design CSS à la portée de tous
- [CSS] height d'un div reglé par expression
- Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.
- [CSS] Mettre en forme du code
- Positionnement avec CSS: Problème
- Style Swticher creer 2 présentation differente CSS sur une page HTML
- [CSS] probleme de couleurs resolu
- CSS et comportement etrange
- Petit problème avec une CSS...
Marsh Posté le 04-09-2003 à 11:30:08
Petite question : j'aimerais faire un preload en CSS.
Est-ce que un truc comme ça fonctionnerait ?
.preload {
background-image: url(...);
display: none;
}
ou alors :
.preload {
background-image: url(...);
position: absolute;
top: -500px
left: -500px;
}
La seconde est peut-être un peu barbare
Avez-vous d'autres solutions ?
Message édité par sibelius le 04-09-2003 à 12:49:44
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com