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

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

Marsh Posté le 29-09-2003 à 19:46:30    

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.

Reply

Marsh Posté le 29-09-2003 à 19:46:30   

Reply

Marsh Posté le 29-09-2003 à 20:04:28    

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
Reply

Marsh Posté le 29-09-2003 à 20:23:44    

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
Reply

Marsh Posté le 29-09-2003 à 20:40:54    

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

Reply

Marsh Posté le 29-09-2003 à 20:46:46    

ok


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 30-09-2003 à 08:34:00    

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

Reply

Marsh Posté le 30-09-2003 à 08:51:22    

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

Reply

Marsh Posté le 30-09-2003 à 08:57:01    

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
Reply

Marsh Posté le 30-09-2003 à 09:00:08    

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

Reply

Marsh Posté le 30-09-2003 à 20:37:46    

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
Reply

Marsh Posté le 30-09-2003 à 20:37:46   

Reply

Marsh Posté le 30-09-2003 à 22:21:03    

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.

Reply

Marsh Posté le 02-10-2003 à 08:52:46    

comment ca pas bonne ?

Reply

Marsh Posté le 10-01-2004 à 02:58:54    

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:

Reply

Marsh Posté le 10-01-2004 à 13:40:23    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed