Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
4166 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Preload en CSS ?

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Preload en CSS ?

n°507151
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 11:30:08  profilanswer
 

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
mood
Publicité
Posté le 04-09-2003 à 11:30:08  profilanswer
 

n°507166
anapajari
s/travail/glanding on hfr/gs;
Posté le 04-09-2003 à 11:38:52  profilanswer
 

drew avait posté un lien très interessant (la) : http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

n°507208
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 11:58:53  profilanswer
 

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
n°507682
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 17:58:57  profilanswer
 

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
n°507687
simogeo
j'ai jamais tué de chats, ...
Posté le 04-09-2003 à 18:01:31  profilanswer
 

SIBELIUS a écrit :

Personne n'a jamais pensé à utiliser de preload en CSS ?


ben ca marche ou pas ton astuce ?  [:spamafote]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
n°507689
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 18:04:12  profilanswer
 

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
n°507703
simogeo
j'ai jamais tué de chats, ...
Posté le 04-09-2003 à 18:12:38  profilanswer
 

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
n°507705
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 18:13:47  profilanswer
 

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  :whistle:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°507708
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 18:15:42  profilanswer
 

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
n°507712
simogeo
j'ai jamais tué de chats, ...
Posté le 04-09-2003 à 18:18:04  profilanswer
 

chai po  [:spamafote]  
ca me semble un peu goret .... mais si ca marche [: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
mood
Publicité
Posté le 04-09-2003 à 18:18:04  profilanswer
 

n°507730
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 18:29:35  profilanswer
 

simogeo a écrit :


a mon avis, il lit ligne par ligne ... mais il a pas le temps de charger la premiere qu'il passe à leuxieme ..  


Ah ouais, c'est tout de suite moins drôle vu comme ça  :cry:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°507914
fadenretur​ns
Posté le 04-09-2003 à 22:13:11  profilanswer
 

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 ?

n°507954
sibelius
Vous êtes sûr ?
Posté le 04-09-2003 à 22:51:20  profilanswer
 

fadenreturns a écrit :


Sinon le preload CSS cest pour un menu en javascript ?

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
n°508127
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 01:15:27  profilanswer
 

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
n°508131
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2003 à 01:21:36  profilanswer
 

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
n°508134
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 01:26:43  profilanswer
 

Ok, merci gm pour ces précisions


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°508136
the real m​oins moins
Posté le 05-09-2003 à 01:52:49  profilanswer
 

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 :
- 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...)

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 ?
n°508139
the real m​oins moins
Posté le 05-09-2003 à 01:56:28  profilanswer
 

l'astuce http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ est tres interessante :)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
n°508141
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 02:05:15  profilanswer
 

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
n°508142
the real m​oins moins
Posté le 05-09-2003 à 02:10:39  profilanswer
 

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 ?
n°508145
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 02:40:52  profilanswer
 

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
n°508147
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 02:53:34  profilanswer
 

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
n°508176
Hermes le ​Messager
Breton Quiétiste
Posté le 05-09-2003 à 08:56:36  profilanswer
 

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.

n°508439
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 12:01:11  profilanswer
 

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
n°508451
Hermes le ​Messager
Breton Quiétiste
Posté le 05-09-2003 à 12:12:53  profilanswer
 

SIBELIUS a écrit :

Bon, sur toutes ces considérations j'en aboutis à ça : http://www.alsacreations.com/articles/preload/
 
Est-ce que tout est correct ?


 
ç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]  

n°508453
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 12:19:20  profilanswer
 

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
n°508458
Hermes le ​Messager
Breton Quiétiste
Posté le 05-09-2003 à 12:24:39  profilanswer
 

SIBELIUS a écrit :


Humm, c'est possible ça ? (des images dans les navigateurs en mode texte  :??: )


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

n°508467
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 12:30:38  profilanswer
 

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
n°508518
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 13:27:35  profilanswer
 

... voire pour placer des mots-clés  :ange:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°508532
dew
Posté le 05-09-2003 à 13:46:29  profilanswer
 

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  :o


Message édité par dew le 05-09-2003 à 13:47:00
n°508562
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 14:04:08  profilanswer
 

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  :sweat:


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
n°508723
meerthyl
Posté le 05-09-2003 à 16:27:23  profilanswer
 

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. :o


Message édité par meerthyl le 05-09-2003 à 16:28:58
n°508802
sibelius
Vous êtes sûr ?
Posté le 05-09-2003 à 17:03:21  profilanswer
 

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
n°509083
gm_superst​ar
Appelez-moi Super
Posté le 05-09-2003 à 23:17:12  profilanswer
 

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
n°1135344
Badze
Aime les frites
Posté le 30-06-2005 à 01:33:02  profilanswer
 

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 :p)
 
Merci.

n°1135345
Badze
Aime les frites
Posté le 30-06-2005 à 01:39:26  profilanswer
 

Voila mon fonctionnement
 

Code :
  1. <div style="display:none">
  2. <img src="image1.jpg" alt=""></img>
  3. <img src="image2.jpg" alt=""></img>
  4. </div>
  5. .... un petit peu de code ....
  6. <img src="image1.jpg" alt=""></img>
  7. <img src="image2.jpg" alt=""></img>


 
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
n°1135353
chimelprem​ier
Posté le 30-06-2005 à 02:32:32  profilanswer
 

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
n°1135366
masklinn
í dag viðrar vel til loftárása
Posté le 30-06-2005 à 07:45:19  profilanswer
 

Quelle est l'intérêt de préloader les images sans rollover? [: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 [:pingouino]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1135419
j_lecruel
☀ ☁ ☂
Posté le 30-06-2005 à 09:17:36  profilanswer
 

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.

n°1135421
masklinn
í dag viðrar vel til loftárása
Posté le 30-06-2005 à 09:21:44  profilanswer
 

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 [:pingouino]
 
Genre sur un site de 10 pages au lieu d'attendre 1s entre chaque page t'attend 10s pour la première [:pingouino] [:pingouino] [:pingouino]
 
En plus vu la gestion du cache d'MSIE c'est même pas sûr qu'il y gagne [:pingouino]
 
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  [:pingouino]
 
C'est stupide [:pingouino]


Message édité par masklinn le 30-06-2005 à 09:22:14

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Preload en CSS ?

 

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 expressionMenu déroulant, Javascript & CSS, Fonctionne sur un max de nav.
[CSS] Mettre en forme du codePositionnement avec CSS: Problème
Style Swticher creer 2 présentation differente CSS sur une page HTML[CSS] probleme de couleurs resolu
CSS et comportement etrangePetit problème avec une CSS...
Plus de sujets relatifs à : Preload en CSS ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.108 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)