Chargement Roll Over trop long
galoou
Messages postés
4
Statut
Membre
-
Reivax962 Messages postés 3742 Statut Membre -
Reivax962 Messages postés 3742 Statut Membre -
Bonjour,
Mes pages web presente essentiellement des image. Pour cela j'utilise pas mal le Roll Over. Sur la droite de ma page, s'affiche toutes les petites vignettes de mes images ( en moyenne 8). L'orsque l'on passe la souris decus, c' elles ci s'affiche en plus grande au centre de ma page, dans une case de mon tableau. Classique quoi!
2 questions;
-Mes pages on des fonds est colore. Sous safari ( he oui je suis sous Mac) aucune distinction entre mon fond et l'image par defaut de mon roll over (c la meme couleur), par contre sous firefox, on voit une legere difference de teinte qui fais donc resortir cette case centrale ou les image apparaisse. Comment resoudre ce probleme.
-J'ai pas mal de difficulte a trouver quel script placer pour accelerer le chargement des images. Les images des tumbails font 4k et leurs agrandissement au centre de ma page 25k en moyenne. Au chargement de ma pages, les tumbails s'affiche rapidement, par contre il y a un moment de latence, 1 seconde, avant l'affichage en grand l'orsque l'on survole avec la souris les tunmbails.
Comment reduir ce temps.
Merci a tous.
Mes pages web presente essentiellement des image. Pour cela j'utilise pas mal le Roll Over. Sur la droite de ma page, s'affiche toutes les petites vignettes de mes images ( en moyenne 8). L'orsque l'on passe la souris decus, c' elles ci s'affiche en plus grande au centre de ma page, dans une case de mon tableau. Classique quoi!
2 questions;
-Mes pages on des fonds est colore. Sous safari ( he oui je suis sous Mac) aucune distinction entre mon fond et l'image par defaut de mon roll over (c la meme couleur), par contre sous firefox, on voit une legere difference de teinte qui fais donc resortir cette case centrale ou les image apparaisse. Comment resoudre ce probleme.
-J'ai pas mal de difficulte a trouver quel script placer pour accelerer le chargement des images. Les images des tumbails font 4k et leurs agrandissement au centre de ma page 25k en moyenne. Au chargement de ma pages, les tumbails s'affiche rapidement, par contre il y a un moment de latence, 1 seconde, avant l'affichage en grand l'orsque l'on survole avec la souris les tunmbails.
Comment reduir ce temps.
Merci a tous.
A voir également:
- Chargement Roll Over trop long
- Ordinateur long à démarrer - Guide
- Échec du chargement du module twitch - Forum jeux en ligne
- Usb device over current status detected ✓ - Forum Matériel & Système
- Start pxe over ipv4 - Forum Windows 10
- Le nom de fichier spécifié n'est pas valide ou est trop long ✓ - Forum Windows
3 réponses
Hé hé
En fait, y a déjà tout ce que j'ai dit là-dedans, donc ça devrait marcher...
Sauf que y a un « mais » :
Dans ton body onload=""
Tu commences par un "preloadImages();"
Or cette fonction n'existe pas ! Le script s'arrête donc là et ne va pas précharger le reste des images.
Si tu supprimes cet appel, cela devrait aller beaucoup mieux :)
Xavier
En fait, y a déjà tout ce que j'ai dit là-dedans, donc ça devrait marcher...
Sauf que y a un « mais » :
Dans ton body onload=""
Tu commences par un "preloadImages();"
Or cette fonction n'existe pas ! Le script s'arrête donc là et ne va pas précharger le reste des images.
Si tu supprimes cet appel, cela devrait aller beaucoup mieux :)
Xavier
Bonjour,
En JavaScript, tu peux précharger les images au lancement de ta page :
var image = new Image();
image.src = "image.jpg";
Si tu fais ça pour toutes les images de ta page :
var image1 = new Image();
image1.src = "image1.jpg";
var image2 = new Image();
image2.src = "image2.jpg";
...
dès l'ouverture, le chargement se fera sans que l'utilisateur ne le sache.
Ensuite, dans ton roll-over, utilise celles-ci :
document.getElementById("zoneaffichage").src = image1.src
Xavier
En JavaScript, tu peux précharger les images au lancement de ta page :
var image = new Image();
image.src = "image.jpg";
Si tu fais ça pour toutes les images de ta page :
var image1 = new Image();
image1.src = "image1.jpg";
var image2 = new Image();
image2.src = "image2.jpg";
...
dès l'ouverture, le chargement se fera sans que l'utilisateur ne le sache.
Ensuite, dans ton roll-over, utilise celles-ci :
document.getElementById("zoneaffichage").src = image1.src
Xavier
Si j'ai bien compris je remplace entre les balise "script" par;
var image1 = new Image();
image1.src = "image1.jpg";
pour toutes les images.
Par contre j'ai pas pige ou je place " document.getElementById("zoneaffichage").src = image1.src" dans mon Roll Over...
Ci dessous ma page t'elle qu'elle ce presente avant modification.
<html><head><title>medic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- End Preload Script -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="preloadImages();MM_preloadImages('medic-01.jpg','medic-01.gif','medic-02.jpg','medic-02.gif','medic-03.jpg','medic-03.gif','medic-04.jpg','medic-04.gif','medic-05.jpg','medic-05.gif','medic-06.jpg','medic-06.gif')" bgcolor="#fffaf2">
<center>
<table width="1000" height="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2"> </td>
<td width="200" height="60"> </td>
</tr>
<tr>
<td width="200" rowspan="2"><img src="../../rollovers et vrac/mapback.gif" name="mapback" width="200" height="400" border="0" usemap="#back" id="mapback"></td>
<td width="400" height="400"><img src="../../rollovers et vrac/fc400x400.gif" name="iviewmedic" width="400" height="400" id="iviewmedic"></td>
<td width="200" height="400"><table width="60" align="center">
<tr>
<td><img src="medic-01.gif" name="med1" width="70" height="70" id="med1" onMouseOver="MM_swapImage('iviewmedic','','medic-01.jpg','med1','','medic-01.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-02.gif" name="med2" width="70" height="70" id="med2" onMouseOver="MM_swapImage('iviewmedic','','medic-02.jpg','med2','','medic-02.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-03.gif" name="med3" width="70" height="70" id="med3" onMouseOver="MM_swapImage('iviewmedic','','medic-03.jpg','med3','','medic-03.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-04.gif" name="med4" width="70" height="70" id="med4" onMouseOver="MM_swapImage('iviewmedic','','medic-04.jpg','med4','','medic-04.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-05.gif" name="med5" width="70" height="70" id="med5" onMouseOver="MM_swapImage('iviewmedic','','medic-05.jpg','med5','','medic-05.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-06.gif" name="med6" width="70" height="70" id="med6" onMouseOver="MM_swapImage('iviewmedic','','medic-06.jpg','med6','','medic-06.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td width="200" height="10"> </td>
</tr>
</table>
</center>
<map name="Map">
<area shape="rect" coords="142,101,144,133" href="#">
<area shape="rect" coords="158,57,159,99" href="#">
<map name="Map2"><area shape="rect" coords="1,372,80,399" href="../../stilllife.html">
</map>
<map name="back">
<area shape="rect" coords="0,373,79,409" href="../../dreams.html">
</map></body></html>
var image1 = new Image();
image1.src = "image1.jpg";
pour toutes les images.
Par contre j'ai pas pige ou je place " document.getElementById("zoneaffichage").src = image1.src" dans mon Roll Over...
Ci dessous ma page t'elle qu'elle ce presente avant modification.
<html><head><title>medic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- End Preload Script -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="preloadImages();MM_preloadImages('medic-01.jpg','medic-01.gif','medic-02.jpg','medic-02.gif','medic-03.jpg','medic-03.gif','medic-04.jpg','medic-04.gif','medic-05.jpg','medic-05.gif','medic-06.jpg','medic-06.gif')" bgcolor="#fffaf2">
<center>
<table width="1000" height="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2"> </td>
<td width="200" height="60"> </td>
</tr>
<tr>
<td width="200" rowspan="2"><img src="../../rollovers et vrac/mapback.gif" name="mapback" width="200" height="400" border="0" usemap="#back" id="mapback"></td>
<td width="400" height="400"><img src="../../rollovers et vrac/fc400x400.gif" name="iviewmedic" width="400" height="400" id="iviewmedic"></td>
<td width="200" height="400"><table width="60" align="center">
<tr>
<td><img src="medic-01.gif" name="med1" width="70" height="70" id="med1" onMouseOver="MM_swapImage('iviewmedic','','medic-01.jpg','med1','','medic-01.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-02.gif" name="med2" width="70" height="70" id="med2" onMouseOver="MM_swapImage('iviewmedic','','medic-02.jpg','med2','','medic-02.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-03.gif" name="med3" width="70" height="70" id="med3" onMouseOver="MM_swapImage('iviewmedic','','medic-03.jpg','med3','','medic-03.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-04.gif" name="med4" width="70" height="70" id="med4" onMouseOver="MM_swapImage('iviewmedic','','medic-04.jpg','med4','','medic-04.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-05.gif" name="med5" width="70" height="70" id="med5" onMouseOver="MM_swapImage('iviewmedic','','medic-05.jpg','med5','','medic-05.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td><img src="medic-06.gif" name="med6" width="70" height="70" id="med6" onMouseOver="MM_swapImage('iviewmedic','','medic-06.jpg','med6','','medic-06.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td width="200" height="10"> </td>
</tr>
</table>
</center>
<map name="Map">
<area shape="rect" coords="142,101,144,133" href="#">
<area shape="rect" coords="158,57,159,99" href="#">
<map name="Map2"><area shape="rect" coords="1,372,80,399" href="../../stilllife.html">
</map>
<map name="back">
<area shape="rect" coords="0,373,79,409" href="../../dreams.html">
</map></body></html>
