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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/js] faire un pre-chargement d'image

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML/js] faire un pre-chargement d'image

n°526041
chico008
what the wookie says ?
Posté le 29-09-2003 à 19:46:30  profilanswer
 

Salut, bon voila, je me demandais si c'etait possible de faire en sorte que des images (pas tres grosse) soient charger en meme temps que la page web.
de facon a ce qu'elle ne se charge pas QUE quand on en a besion.
 
je pense a des boutons avec 2 images, 1 image de base et 1 pour kand la sourie passe dessus, comme ca ca fais un effet instantaner (enfin presque), car sinon faut attendre un peu avant que l'image d'effet arrive.
 
Je me soute bien que ca se fais pas en html, mais en Js.
donc si quelqu'un sait comment on fais ca, bah ce serait super.

mood
Publicité
Posté le 29-09-2003 à 19:46:30  profilanswer
 

n°526060
Hermes le ​Messager
Breton Quiétiste
Posté le 29-09-2003 à 20:04:28  profilanswer
 

Tu fais une fonction que tu appelles comme tu veux (on va dire precharg() par exemple)
 
donc :
 
 
 
Voilà comment se présente une fonction.

Code :
  1. function precharg()
  2. {
  4. }


 
 
 
Dans cette fonction tu vas déclarer une image et la charger comme ceci :
 

Code :
  1. image1 = new Image(la_largeur,la_hauteur);
  2. image1.src = "adresse_de_l_image.png";


 
Le png n'est pas obligatoire, tu peux aussi avoir du gif ou du jpeg etc...
 
Tu répètes ça autant de fois que tu as d'images en n'oubliant pas d'augmenter de 1.
 
donc la prochaine image est :
 

Code :
  1. image2 = new Image(la_largeur,la_hauteur);
  2. image2.src = "adresse_de_l_image.png";


 
etc...
 
Ensuite, tu lances le body en fonction de ce préchargement :
 
<body onload="precharg();">
 
Là tu as ce qu'on appelle un appel de fonction.
 
 :D


Message édité par Hermes le Messager le 29-09-2003 à 20:05:46
n°526087
sibelius
Vous êtes sûr ?
Posté le 29-09-2003 à 20:23:44  profilanswer
 

Clair et précis ;)
 
Question : si on ne met pas de fonction, mais simplement le javascript dans le head... qu'est-ce que ça change ?
Il devrait charger les images avant même de charger le body, non ? (c'est préférable comme solution, non?)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°526107
Hermes le ​Messager
Breton Quiétiste
Posté le 29-09-2003 à 20:40:54  profilanswer
 

SIBELIUS a écrit :

Clair et précis ;)
 
Question : si on ne met pas de fonction, mais simplement le javascript dans le head... qu'est-ce que ça change ?
Il devrait charger les images avant même de charger le body, non ? (c'est préférable comme solution, non?)


 
Non, parce que le HTML va se charger avant que les images soient toutes chargées... (enfin, ça dépend des navigateurs en fait).

n°526120
sibelius
Vous êtes sûr ?
Posté le 29-09-2003 à 20:46:46  profilanswer
 

ok


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°526578
chico008
what the wookie says ?
Posté le 30-09-2003 à 08:34:00  profilanswer
 

Donc si je comprend, avec ca il va charger les images avant de charger le HTML ? c bien ca ?

n°526583
Hermes le ​Messager
Breton Quiétiste
Posté le 30-09-2003 à 08:51:22  profilanswer
 

Chico008 a écrit :

Donc si je comprend, avec ca il va charger les images avant de charger le HTML ? c bien ca ?
 


 
En théorie oui, mais ce n'est jamais parfait et bcp de navigateurs n'en feront de toutes manières qu'à leur tête...  :D

n°526589
chico008
what the wookie says ?
Posté le 30-09-2003 à 08:57:01  profilanswer
 

Tu as des exemples de se qui peut se passer ?
 
sinon au nivo de ton code que tu propose, question con, je suis pas obliger de mettre image1 ou image2 (au nivo variable) ?


Message édité par chico008 le 30-09-2003 à 08:58:06
n°526594
Hermes le ​Messager
Breton Quiétiste
Posté le 30-09-2003 à 09:00:08  profilanswer
 

Chico008 a écrit :

Tu as des exemples de se qui peut se passer ?
 
sinon au nivo de ton code que tu propose, question con, je suis pas obliger de mettre image1 ou image2 (au nivo variable) ?


 
non

n°527166
chico008
what the wookie says ?
Posté le 30-09-2003 à 20:37:46  profilanswer
 

Hermes le Messager a écrit :

Tu fais une fonction que tu appelles comme tu veux (on va dire precharg() par exemple)
 
donc :
 
 
 
Voilà comment se présente une fonction.

Code :
  1. function precharg()
  2. {
  4. }


 
 
 
Dans cette fonction tu vas déclarer une image et la charger comme ceci :
 

Code :
  1. image1 = new Image(la_largeur,la_hauteur);
  2. image1.src = "adresse_de_l_image.png";


 
Le png n'est pas obligatoire, tu peux aussi avoir du gif ou du jpeg etc...
 
Tu répètes ça autant de fois que tu as d'images en n'oubliant pas d'augmenter de 1.
 
donc la prochaine image est :
 

Code :
  1. image2 = new Image(la_largeur,la_hauteur);
  2. image2.src = "adresse_de_l_image.png";


 
etc...
 
Ensuite, tu lances le body en fonction de ce préchargement :
 
<body onload="precharg();">
 
Là tu as ce qu'on appelle un appel de fonction.
 
 :D


 
ya un probleme avec ca, des que je passe le curseur sur le liens, c l'icone comme quoi il trouve pas l'image (un cadre avec une crois rouge).
 
voici mon code entre <head> et </head>
<script>
function preload()
{
l0 = new Image;  
l0.src = 'app/l0.JPG';
l1 = new Image;  
l1.src = 'app/l1.JPG';
i0 = new Image;  
i0.src = 'app/i0.JPG';
i1 = new Image;  
i1.src = 'app/i1.JPG';
ld0 = new Image;  
ld0.src = 'app/ld0.JPG';
ld1 = new Image;  
ld1.src = 'app/ld1.JPG';
p0 = new Image;  
p0.src = 'app/p0.JPG';
p1 = new Image;  
p1.src = 'app/p1.JPG';
u0 = new Image;  
u0.src = 'app/u0.JPG';
u1 = new Image;  
u1.src = 'app/u1.JPG';
a0 = new Image;  
a0.src = 'app/a0.JPG';
a1 = new Image;  
a1.src = 'app/a1.JPG';
}
</script>
 
et dans le body g mis onload="preload();"
 
en gros, ca marche pas.


Message édité par chico008 le 30-09-2003 à 20:39:14
mood
Publicité
Posté le 30-09-2003 à 20:37:46  profilanswer
 

n°527317
Hermes le ​Messager
Breton Quiétiste
Posté le 30-09-2003 à 22:21:03  profilanswer
 

Chico008 a écrit :


 
ya un probleme avec ca, des que je passe le curseur sur le liens, c l'icone comme quoi il trouve pas l'image (un cadre avec une crois rouge).
 
voici mon code entre <head> et </head>
<script>
function preload()
{
l0 = new Image;  
l0.src = 'app/l0.JPG';
l1 = new Image;  
l1.src = 'app/l1.JPG';
i0 = new Image;  
i0.src = 'app/i0.JPG';
i1 = new Image;  
i1.src = 'app/i1.JPG';
ld0 = new Image;  
ld0.src = 'app/ld0.JPG';
ld1 = new Image;  
ld1.src = 'app/ld1.JPG';
p0 = new Image;  
p0.src = 'app/p0.JPG';
p1 = new Image;  
p1.src = 'app/p1.JPG';
u0 = new Image;  
u0.src = 'app/u0.JPG';
u1 = new Image;  
u1.src = 'app/u1.JPG';
a0 = new Image;  
a0.src = 'app/a0.JPG';
a1 = new Image;  
a1.src = 'app/a1.JPG';
}
</script>
 
et dans le body g mis onload="preload();"
 
en gros, ca marche pas.


 
L'adresse de tes images dans le Javascript n'est pas bonne.

n°528970
chico008
what the wookie says ?
Posté le 02-10-2003 à 08:52:46  profilanswer
 

comment ca pas bonne ?

n°606896
rexet
Posté le 10-01-2004 à 02:58:54  profilanswer
 

up ça m'intéresse :)
il existe d'autre solution ?
 

En théorie oui, mais ce n'est jamais parfait et bcp de navigateurs n'en feront de toutes manières qu'à leur tête


 
c'est-à-dire ?
 
merci :jap:

n°607018
jagstang
Pa Capona ಠ_ಠ
Posté le 10-01-2004 à 13:40:23  profilanswer
 

Chico :  
 
image2 = new Image(la_largeur,la_hauteur);  
 
oublie pas préciser la dimension dans le constructeur (ce que tu ne fais pas actuellement)


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

  [HTML/js] faire un pre-chargement d'image

 

Sujets relatifs
Forcer le téléchargement d'un fichier txt ou html[Html - CSS] problème de décalage
[HTML]input type = .......... URL ?Comment forcer une page html à ne pas venir du cache
[HTML/JS] Selection auto dans un select dynamiqueonmouseover : javascript ou intégré au HTML ???
[HTML/js] Liens vers plusieurs frame[RESOLU] euh pkoi ca marche pas cette image??
Coloration syntaxique de C++ vers du HTML, problèmes ....logiciels création image-map
Plus de sujets relatifs à : [HTML/js] faire un pre-chargement d'image

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

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR