(info)Preload d'images sur le forum Création de sites web - 12-09-2004 00:31:29

Liste des sujets

(info)Preload d'images

MathieuN7

Niveau 10

12 septembre 2004 à 00:31:29

Bonjour, bonsoir tout le monde,

J´ai décidé de faire ce topic, car cela fait plusieurs fois que je vois des sites qui utilisent des roll-overs.

Définition d´un roll-over:
C´est lorsqu´une image change quand le visiteur passe la souris dessus. ( Vous pouvez trouver un exemple à cette page: http://www.siteduzero.com/html/scripts.php descendez un peu et vous trouverez "roll-over" )

Et donc, sur ces sites, souvent il y a une grosse image, et lorsque le visiteur pointe cette image, une autre s´affiche. Le premier exemple qui me tombe sous la main: [ http://handgames.tk/ ]

Vous remarquerez que les trois images en haut possèdent un roll-over. Et bien si vous faites bien attention, lorsque vous passez le curseur dessu pour la première fois, l´image de s´affiche pas instantanément! En revanche, lorsque vous repassez une deuxième fois, elle s´affiche de suite.

Pourquoi? C´est tout simple: au premier passage de la souris, le navigateur télécharge l´image depuis le server, la met dans le cache ( temporaire), puis l´affiche. Lorsque vous repassez une deuxième fois, l´image est DÉJÀ dans le cache, le navigateur n´a donc pas à la télécharger, et donc l´affichage se fait de manière instantanée. Même moi qui suis en 1024/128 je ressens ce décalage, alors imaginez pour les 56Kbps!!!

La solution? Elle est tout simple, et donctionne avec quasiment tous les navigateurs! Il suffit de preloader les images ( pour ceux qui ne parlent pas anglais, on peut décomposer le mot en deux: pre ( avant) et load ( charger)). Cette méthode consiste à charger l´image avant que le navigateur n´ait à l´afficher, ce qui fait qu´elle sera affichée beaucoup plus rapidement, voire instantanément.

Comment procéder? Il vous suffit d´insérer, dans un coin de votre site ( en bas de la page de préférence) le code classique pour ajouter une image, à la seule différence que vous ajouter l´attribut:

style="display: none;"

Qui dit au navigateur de ne PAS afficher l´image.

Je vous entends déjà dire "Ben... On affiche l´image, mais on l´affiche pas??? Il se fout de moi lui!!!"
Récapitulons:

Si vous faites un roll-over sans précharger l´image, au premier passage de la souris, l´image devra être téléchargée ( Cf plus haut) au moment du passage de la souris, ce qui provoquera une attente du côté du visiteur.

En revanche, si vous faites un roll-over avant le passage de la souris, l´image s´affichera instantanément lors du passage, puisqu´elle aura déjà été chargée! Et techniquement, la méthode consiste à dire au navigateur d´insérer une image tout en la cachant, ce qui fait qu´elle est téléchargée dès le chargement de la page, comme n´importe quelle image normalement affichée!

Vous me suivez?

Le code devra donc ressembler à ça:

<body>
/ /corps de votre page
/ /Puis, tout à la fin, et pour chaque image secondaire de chaque roll-over:
<img style="display: none;" src="dossier/image.ext" / *différents attributs*/>
</body>

Voilà, j´espère que vous avez compris, si qq chose n´est pas clair n´hésitez pas à demander ici, il est 0h30 ( et non 24h30, private joke ^^) et donc je n´ai plus l´esprit très clair...

Bon coding à tous!!!
@+,
MathieuN7

zel89

Niveau 10

12 septembre 2004 à 00:58:55

Je vais faire ça.

Au faites merci pour la pub

MathieuN7

Niveau 10

12 septembre 2004 à 09:33:50

Ben c´était pas spécialement fait pour ça mais bon... C´est vrai que ça te fait un peu de pub au passage...

MathieuN7

Niveau 10

12 septembre 2004 à 21:07:17

Bon ben un petit
Pour ceux qui ne l´auraient pas vu et à qui ça peut servir...

watzakamikaze

Niveau 10

13 septembre 2004 à 12:01:11

c´est pas pour etre mechant... mais le teknike preload c bien pour le 56k... Mais les pcs faibles ? pc ke sur le site de z3l meme avec preload y a un temps de chargement

MathieuN7

Niveau 10

13 septembre 2004 à 15:54:48

comment ça? explique mieux

Yoda_Software

Niveau 30

13 septembre 2004 à 19:41:01

D´une façon ou d´une autre, les images il faut les charger, alors autant les charger toutes en même temps plustôt que de charger la page et qu´au moment ou l´on passe le curseur sur le menu, il se remette à charger.

vin-moi

Niveau 10

13 septembre 2004 à 20:29:04

zel89, je t´est retrouvé ! ! ( http://www.depannetonpc.tk )

vient, j´ai repondu a ton topic ! !

tu doit bien te souvenir ? aller passe sur mon forum ; )

MathieuN7

Niveau 10

13 septembre 2004 à 22:22:09

Le temps de chargement de ton PC ne dépend plus de ta connexion, donc une fois que tu as optimisé le truc niveau traffic, après chacun ses problèmes!

watzakamikaze

Niveau 10

14 septembre 2004 à 12:38:11

et wi, mais apres ca engendre d otre probleme

Yoda_Software

Niveau 30

14 septembre 2004 à 16:12:51

Vas-y explique, j´ai envie de rire !

MathieuN7

Niveau 10

14 septembre 2004 à 18:48:01

moi aussi j´ai envie de rire un peu, après une journée de 8h de cours c un peu normal non?
Allez jtécoute

fil_razorback

Niveau 10

15 septembre 2004 à 18:00:34

riche idée ca*

watzakamikaze

Niveau 10

15 septembre 2004 à 18:48:38

ben je c pas j avais dit o hasard

PS --> hier moi etre de movais poil

Yoda_Software

Niveau 30

15 septembre 2004 à 18:57:03

Ce n´est pas une raison pour emmerder les autres !

watzakamikaze

Niveau 10

15 septembre 2004 à 20:05:12

rooh desolé

Personne n´est parfait que je sache, yoda...
Sof toi, tu es mon dieu, un exemple pour moi

MathieuN7

Niveau 10

15 septembre 2004 à 20:19:48

On n´a jamais dit que tu devais etre parfait

MathieuN7

Niveau 10

16 septembre 2004 à 19:54:44

watzakamikaze

Niveau 10

16 septembre 2004 à 20:42:29

c koi mediator?

Oo_Sauron_oO

Niveau 9

16 septembre 2004 à 20:49:57

Dans le contexte je dirais un navigateur qui pré-load les images, mais sinon j´en ai aucune idée.

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News jeu

228 185 spectateurs

Un trophée platine qui coûte 28.568 euros ? Ça existe, et c'est même le plus long à obtenir de la PlayStation

L'univers des chasseurs de trophées PlayStation regorge de défis exigeants, mais certains titres franchissent complètement la ligne jaune du raisonnable. C'est exactement le cas de Prominence Poker, un jeu de poker free-to-play sorti en 2016 sur PS4. Sous ses airs de petite production anodine, ce titre héberge dans sa liste l'une des récompenses virtuelles les plus démentielles et les plus coûteuses de l'histoire de la console de Sony : le fameux succès « Milliardaire ». Une anecdote en premier lieu relayée par le vidéaste @D4WS7N2.

Toutes les news jeu