28220 sujets

CSS et mise en forme, CSS3

[résolu] Préchargement des images

Bonjour,

Je cherche à précharger des images qui n'apparaissent que sous l'action de la pseudo-class hover afin qu'il n'y ait pas de retard à leur apparition ? J'ai essayé de les mettre dans le html dans un cadre que je met en visibility:hidden, j'ai aussi essayé de charger ces images dans le css en affectant successivement à un cadre les images en background mais aucune de ces 2 méthodes ne marche. J'ai toujours un retard à la première apparition de l'image qand je pointe avec la souris sur le lien concerné. Sauriez-vous m'aider ?
Modifié par mathmax (04 Jan 2006 - 19:12)
mathmax a écrit :
Je cherche à précharger des images qui n'apparaissent que sous l'action de la pseudo-class hover afin qu'il n'y ait pas de retard à leur apparition ? J'ai essayé de les mettre dans le html dans un cadre que je met en visibility:hidden, j'ai aussi essayé de charger ces images dans le css en affectant successivement à un cadre les images en background mais aucune de ces 2 méthodes ne marche. J'ai toujours un retard à la première apparition de l'image qand je pointe avec la souris sur le lien concerné. Sauriez-vous m'aider ?

En javascript : il doit y avoir plein de fonctions de preload... (j'y connais rien, mais je sais que ça existe et que ça marche). Alors bien sûr il faut que javascript soit activé (90 % des utilisateurs, un truc comme ça ?), mais vu qu'il s'agit d'un détail de mise en forme, ça peut suffire. IDN(*), tout ça.

En CSS :
- rien de prévu pour ;
- des trucs de barbare dont il paraît que ça marche. Genre : je crée une div contenant mes images (balises img), et je la vire au bout du monde.

Par exemple :

HTML
<div id="preload">
    <img src="monimage1.png" alt="..." />
    <img src="monimage2.png" alt="..." />
    ...
    <img src="monimagen.png" alt="..." />
</div>

CSS
div#preload {
    position: absolute;
    top: -4000px;
}

Je dis ça de tête, donc aucune garantie que ça marche Smiley lol .

---
* It Degrades Nicely : si ça passe pas, c'est pas méchant.
Oui c'est justement une des chôses que j'ai essayé de faire mais ça ne marche pas. Il y a toujours ce temps de latence pour charger l' image réactive la première fois que je pointe dessus...
Salut,
Et avec un truc comme ça ?
css
#preload img {	
    height: 0px;
    width: 0px;
}

html
<span id="preload"><img src="image1.jpg" alt=""/><img src="image2.jpg" alt=""/></span>

ou directement pour l'image à précharger
<img src="image.jpg" alt="" width="0" height="0" />
Alan a écrit :
Salut,
Et avec un truc comme ça ?
css
#preload img {	
    height: 0px;
    width: 0px;
}

html
<span id="preload"><img src="image1.jpg" alt=""/><img src="image2.jpg" alt=""/></span>

ou directement pour l'image à précharger
<img src="image.jpg" alt="" width="0" height="0" />

À mon avis ça ne marche pas.

IE 6 comprend l'attribut "height" comme une hauteur minimale il me semble. Du coup si on ajoute du contenu, le contenu apparaîtra quand même.

Avec un overflow: hidden; peut-être...
mpop a écrit :

À mon avis ça ne marche pas.

IE 6 comprend l'attribut "height" comme une hauteur minimale il me semble. Du coup si on ajoute du contenu, le contenu apparaîtra quand même.


Je ne comprends pas ? Si on ajoute du contenu où ?
J'ai fait un test ICI, et je n'ai pas remarqué de problème avec IE 6 (ni IE 5 d'ailleurs)

A+
Alain
De toute façon il vaut nettement mieux ne pas passer par une solution impliquant un ajout inutile (et donc inadmissible) dans le code html. Comme déjà dit la solution de l'image unique est très bonne.

Sinon, soit dans le document un élément identifié (id="coucou_c_moi" Smiley lol ) n'ayant pas de propriété background-image.

Alors on peut appliquer le style


#coucou_c_moi {
background:#couleur_si_necessaire url(img_a_preloader.jpg) no-repeat 250cm;
}


En général ça fonctionne très bien tant que les écrans font moins de 2 mètres 50 de large Smiley smile
clb56 a écrit :
De toute façon il vaut nettement mieux ne pas passer par une solution impliquant un ajout inutile (et donc inadmissible) dans le code html. Comme déjà dit la solution de l'image unique est très bonne.


mettre dans le html ça peut être dans quelques cas intéressant pour le référencement d'images
Modifié par Alan (29 Dec 2005 - 18:48)
Alan a écrit :


mettre dans le html ça peut être dans quelques cas intéressant pour le référencement d'images


1px x 1px ! je veux une image d'un pixel transparente, avec tout plein de mots clés dedans ! Si si !

ça nous rappelera au moins des bons souvenis d'antan... Smiley lol

Bon, sérieusement : il y a comme un petit problème de maintenance de cette image de preload avec la solution <img>, dans des projets autres que des sites individuels (j'image ça dans quelques-uns des projets en cours que j'ai sous les yeux Smiley eek ). On va éviter. La double image de background CSS est effectivement utilisable dans la plupart des cas, à beaucoup moindre coût qualitatif. Sinon, on peut aussi laisser l'utilisateur d'IE faire avec son navigateur s'il s'agit d'une image de contenu (= référençable). Ou se passer du roll-over dessus Smiley cligne
Modifié par Laurent Denis (29 Dec 2005 - 19:28)
Alan a écrit :


mettre dans le html ça peut être dans quelques cas intéressant pour le référencement d'images


Là il y a un vrai problème !

Ce qu'il y a de sous jascent dans l'idée de séparation structuration/présentation quand on parle de css renvoit AMTHA (le "T" c'est pour très Smiley cligne ) à la notion d'intégrité du document html. Celle ci doit être pensée comme devant être "absolument préservée", et il ne s'agit pas de dictat mais tout simplement de méthode. Cette notion doit orienter tout travail de développement web, qu'il s'agisse de considérations sur une interface graphique, de mise en place de script, et aussi de travail sur le référencement. A charge pour les professionnel de la chose d'optimiser le potentiel qu'offre le document sans le travestir.

J'aurais tendance à penser que tout se joue dans la capacité ou la non capacité à percevoir ce potentiel. Enfin tout ça pour dire que webrankinfo c'est vraiment bien Smiley smile .

>> à Laurent,

Moi quand j'ai pas de rollover je pleure

quand je pleure j'ai les yeux embués

quand j'ai les yeux embués je vois plus rien

quand je vois plus rien ça nuit à la qualité

...

...

Donc je fais des rollover Smiley biggol Smiley biggol
clb56 a écrit :
Ce qu'il y a de sous jascent dans l'idée de séparation structuration/présentation quand on parle de css renvoit AMTHA (le "T" c'est pour très Smiley cligne ) à la notion d'intégrité du document html. Celle ci doit être pensée comme devant être "absolument préservée", et il ne s'agit pas de dictat mais tout simplement de méthode. Cette notion doit orienter tout travail de développement web, qu'il s'agisse de considérations sur une interface graphique, de mise en place de script, et aussi de travail sur le référencement. A charge pour les professionnel de la chose d'optimiser le potentiel qu'offre le document sans le travestir.



Superbe.

Pertinent.

Mais : praticable aujourd'hui uniquement dans des conditions de développement relativement idéales. Elles sont parfois réalistes, mais le plus souvent assez éloignée du "développement Cow-Boy" qui est le lot commun.

(J'emprunte l'expression à quelqu'un que j'aime beaucoup, qui a dit des choses très bien vues sur la praticabilité d'XHTML CSS, et qui n'a hélas pas été du tout compris par la "hype standard" : l'excellent Luc Saint Elie.)

Sans compter pour demain (mais on a déjà commencé) le développement des applications Web, dans lesquels la structure est en grande partie au service de la présentation, elle-même au service d'une utilisabilté devenue cruciale. On est très loin dans ce cas du modèle classique et confortable du document Web.

Bref, il peut être utile, intelligent, profitable à l'utilisateur, voire même accessible, de mêler la présentation à la structure.

(Pas dans le cas du roll-over. Non. Quand même pas.)
Modifié par Laurent Denis (29 Dec 2005 - 20:16)
Oui certainement, n'étant pas moi même professionnel je ne suis évidemment jamais confronté à ce type d'environnement et de contrainte.

Néanmoins, et pour le redire, il n'y aurait là dedans rien qui soit de l'ordre du dictat mais simplement une méthode pour penser ce que l'on fait.

Pour le dire autrement, qu'il faille composer avec la réalité soit... mais quelque soit la prégnance de celle ci il n'en reste pas moins vrai que tenir compte qu'il s'agit bien de composition peut amener à moduler la quantité de ladite composition.

On peut évidemment aussi se dire que la jungle du far west interdit toute pensée et ne valorise que l'action brute (en toute sincérité aucune allusion perfide aux propos tant décriés de Luc Saint Elie).

<edit>
Ma réponse arrive bien après ta modification, mais c'est normal car j'écrit toujours très lentement.
</edit>
Modifié par clb56 (29 Dec 2005 - 20:27)
clb56 a écrit :
tenir compte qu'il s'agit bien de composition peut amener à moduler la quantité de ladite composition.


Si ce n'est qu'il s'agit peut-être bien de se demander si le modèle XHTML CSS est pertinent pour tous les besoins de développements HTML actuels. J'ai du mal avec cette idée qu'on "compose avec l réalité" quand il s'agit d'une réalité qui commande des besoins, une économie, bref, finalement le Web Smiley cligne
Laurent Denis a écrit :

il s'agit peut-être bien de se demander si...


Ah ben là je suis d'accord évidemment Smiley cligne

Sinon personnellement j'ai toujours préféré l'idée d'une composition réévaluable à celle d'une soumission pure et simple.
Merci pour votre aide et désolé de répondre si tard, je n'avais pas accès à internet ces derniers jours.

J'ai appliqué ta méthode clb56, elle marche parfaitement. En fait moi j'avais préchargé mes images en les mettant dans le HTML alors que je les utilisait par la suite dans le CSS du coup ça ne marchait pas. J'avais aussi essayé d'affecter successivement à un cadre les images en background puis de l'écarter de la zone visible de la page mais en fait ça ne marchait que pour la dernière image les autres n'atais pas chargée. J'ai donc fais un cadre qui contient un cadre par image à charger, appliqué à chaque cadre l'image de fond à charger, puis écarté le cadre qui enveloppe le tout hors de la zone visible.

Voilà juste pour vous tenir au courant.
Sujet clos
Aller à