[résolu] Préload image css

Bonjour,

Sur le fond, pas de probléme je le conçois
mais un code du style :

<img src="image.jpg" style="display:none" alt="">
 

pour un préload d'image est il d'après vous efficace ? j'ai un doute !

Merci
Modifié par ghost (23 Sep 2006 - 11:47)

bonsoir ghost,

Pour répondre à ta question, cette technique est efficace sauf pour les rares navigateurs qui, prenant l'instruction display:none; à la lettre ne les mettents pas en cache.
L'alternative pour être d'afficher tes images en dehors de la zone visible à l'écran au moyen des marges négatives.

J'espère que cela t'aura été utile

ghost a écrit :
Bonjour,

Sur le fond, pas de probléme je le conçois
mais un code du style :

<img src="image.jpg" style="display:none" alt="">
 

pour un préload d'image est il d'après vous efficace ? j'ai un doute !

Merci

Oui c'est efficace, mais pas des plus élégants.

Solution avec une image double :

http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Solution que j'ai pour ma part imaginée :

Soit dans le document un élément quelconque doté d'un id et n'ayant pas de propriété de background-image. Alors :
css

#element_quelconque {
background:url(image2.jpg) no-repeat 50000px 50000px;
}

et

a {
background:url(image1.jpg) no-repeat left top;
}
a:hover {
background:url(image2.jpg) no-repeat left top;
}

Cette deuxième solution en plus de l'avoir imaginée je l'utilise, ça fonctionne parfaitement.
Modifié par clb56 (20 Sep 2006 - 22:25)

Bonjour,

Merci pour ton astuce (mais en plus je référe garder les images dans le html), biensûr dans le cadre d'un roll over j'utilise les images doubles mais j'aurais du préciser c'est dans le cadre d'une "fausse pop up" en agrandissement d'image donc guère applicable dans ce cas. C'est à dire que je charge une image taille full qui à l'état link est réduite puis à sa taille maximum sur un over. Le problème qu'à l'ouverture du navigateur si l'image n'est pas en cache elle se retrouve en grande taille le temps du chargement (une fraction de seconde peut être pas en 56k !) puis prend sa taille réduite. Ce n'est pas très génant en haut débit (mais pas très élégant) mais j'ai un doute en bas débit ... J'ai donc tenté le pré chargement en css mais bof, je ne vois guère de résultat et avant de rechercher une autre cause ou tenter le javascript je voulais avoir votre avis.
Merci à tous les 2
Modifié par ghost (21 Sep 2006 - 01:17)

ghost a écrit :
Merci pour ton astuce (mais en plus je référe garder les images dans le html)

Avoir les images en tant qu'images de contenu (élément img) dans le HTML signifie qu'en cas de désactivation de la feuille de style (ou des styles en général) les images seront affichées.

Pour ma part, j'estime que le préchargement des images est -- en général -- une question de confort ergonomique. Et le confort ergonomique n'est pas le but premier de l'accessibilité, par exemple. Donc un préchargement en javascript me semble tout à fait indiqué.

Bien sûr, c'est à adapter à la situation.

Hello,

Rapidement (car ça peut servir dans ce sujet) :
http://forum.alsacreations.com/faq/#item72

ghost a écrit :
j'aurais du préciser c'est dans le cadre d'une "fausse pop up" en agrandissement d'image donc guère applicable dans ce cas.

Coup de gueule 1
Effectivement on gagnerait tous du temps si les questions étaient mieux précisées.


Coup de gueule 2
Ma solution n'est pas une astuce mais une technique possible et efficace. Il se trouve que personne n'y pense tout simplement.

clb56 a écrit :



Coup de gueule 1
Effectivement on gagnerait tous du temps si les questions étaient mieux précisées.


Coup de gueule 2
Ma solution n'est pas une astuce mais une technique possible et efficace. Il se trouve que personne n'y pense tout simplement.

1 - C'est une évidence, on en gagnerait encore plus si on ne posait plus de question.
2 - Donc merci pour ta technique astucieuse, si je puis me le permettre sans nullement avoir une quelconque pensée péjorative.

Cordialement.

ghost a écrit :


1 - C'est une évidence, on en gagnerait encore plus si on ne posait plus de question.

Sauf celui qui pose la question. Le manque de rigueur qui fait omettre les paramètres fixant la perspective dans laquelle la question se pose, s'appelle se tirer une balle dans le pied

A double titre d'ailleurs :

. Les réponses ne correspondent pas à la question réelle qui reste indéterminée.

. La mise au point qui arrive (enfin !), en cela même qu'elle qualifie de HS les réponses, pourtant pertinentes, déjà données est un encouragement au découragement de répondre à quelque question que ce soit. Non seulement du posteur initial mais bel et bien de tout posteur à venir

Ne pas poser de question est effectivement une solution radicale.
Ne pas donner de réponse ne l'est pas moins.

Merci d'y réfléchir.
Modifié par clb56 (23 Sep 2006 - 15:25)

a écrit :
Ma solution n'est pas une astuce mais une technique possible et efficace. Il se trouve que personne n'y pense tout simplement.

si si , on y pense

enfin pour le background, je l'applique a des element placé en absolute , en taille zero et overflow:hidden; , (+ un z-index: negatif pour opera si il y a du contenu ) ,
en fait une balise image (caché ou reduite a zero) peut servir a mettre 2 image en caches ! une dans le src="" et une autre en background de celle-ci .

Dans le cas d'un diaporama il suffit de mettre en background(cache) l'image suivante .
pour reprendre la faq , on a donc bien la premiere image et son texte alternatif + eventuellement un title et longesc , et la seconde image en preload dans le background, on rejoint effectivement les techniques citées.

J'utilise aussi se principe pour cacher un texte (lisible pour les lecteur d'ecran par exemple ) quand une image d'arriere plan est mise en avant pour le rendu visuelle . (cas d'un h1 , par exemple ) .... technique parmis d'autres .

... donc on peut imaginé que ton image en popup puissent servir de background a la petite image "a cliqué" pour ouvrir ce pôpup , non ?

++
Modifié par gcyrillus (23 Sep 2006 - 16:45)

Bonjour,

Pas mal du tout cette idée !! Je vais tester et te tiens au courant, car le préload css classique n'empêche pas le phénomène d'affichage intempestif et momentanné de l'image pleine taille avant l'affichage en taille réduite.
Je peux évidemment éliminer ce phénomene en chargeant 2 images la réduite et la pleine taille mais le poids de la page s'en ressent méchamment.

En tout cas merci pour cette "technique" qui à le mérite d'être au moins plus élégante et économe en code.