0/5 (8 avis)
Vue 23 533 fois - Téléchargée 861 fois
<html> <head> <title>Iwaweb - Preload</title> <script language="javascript"> window.status="Cliquez sur le document pour faire rentrer les barres"; xr=["voirscript","telecharger","documentation"]; occupe=0; xt=0; function effacer() { for(i=0;i<3;i++) { eval("document.all."+xr[i]+".style.pixelLeft=-108"); } } function derouler(xs) { occupe=1; xt=xs; for(i=0;i<3;i++) { if(i!=xs) { eval("document.all."+xr[i]+".style.pixelLeft=-108"); } } function action() { eval("document.all."+xr[xs]+".style.pixelLeft=document.all."+xr[xs]+".style.pixelLeft+2"); } if(eval("document.all."+xr[xs]+".style.pixelLeft")<0){action();} if(eval("document.all."+xr[xs]+".style.pixelLeft")<0) { appel=setTimeout("derouler("+xs+")",12); } else{occupe=0} } function attente(xs) { if(!occupe){derouler(xs);} else{if(xs!=xt){clearTimeout(appel);occupe=0;}} } </script> </head> <body onclick="effacer()"> <script language="javascript"> var images_a_charger=new Array("images/ati.gif","images/matrox.gif","images/3dfx.gif"); //indiquez dans le tableau images_a_charger les images que vous voulez charger var temp=new Array(); barre_des_status=1; //saissisez 0 si vous voulez une barre des status vide ou aucune barre au centre de l'écran barre_centrale=1; if(barre_centrale) { gauche=(document.body.clientWidth-204)/2; haut=(document.body.clientHeight-24)/2; if(gauche<0){gauche=0;} if(haut<0){haut=0;} document.write("<div id='cadre' style='position:absolute;height:24px;width:204px;left:"+gauche+"px;top:"+haut+"px;background-color:black'></div>"); document.write("<div id='cacheblanc' style='position:absolute;height:20px;width:200px;left:"+(gauche+2)+"px;top:"+(haut+2)+"px;visibility:visible;background-color:white'></div>"); couleur="black"; document.write("<div id=barrebleu style='position:absolute;height:20px;width:0px;left:"+(gauche+2)+"px;top:"+(haut+2)+"px;background-color:blue'></div>"); document.write("<div id=chiffre style='position:absolute;height:20px;width:200px;left:"+(gauche+2)+"px;top:"+(haut+2)+"px'><p align=center><font face=verdana size=2 color="+couleur+">0%</font></p></div>"); } function start() { for(i=0;i<images_a_charger.length;i++) //lance le chargement des images { temp[i]=new Image(); temp[i].src=images_a_charger[i]; } verif(); } function verif() { imgload=0; for(i=0;i<images_a_charger.length;i++) //verifie les images dont le chargement est complet { if(temp[i].complete) { imgload+=1; } } pourcentage=Math.round((imgload/images_a_charger.length)*100); if(barre_centrale) { document.all.barrebleu.outerHTML="<div id=barrebleu style='position:absolute;height:20px;width:"+(pourcentage*2)+"px;left:"+(gauche+2)+"px;top:"+(haut+2)+"px;background-color:blue'></div>"; if(pourcentage>54){couleur="white"} document.all.chiffre.innerHTML="<p align=center><font face=verdana size=2 color="+couleur+">"+pourcentage+"%</font></p>"; } if(barre_des_status) { window.status = "Chargement en cours..."+pourcentage+"%"; } if(imgload==images_a_charger.length) { fin(); } else { setTimeout("verif()",100); //rappelle la fonction tous les 1/10è de seconde pour verifier l'avancement du chargement } } function fin() { //location="xxx.htm";//indiquez ici la page à appeler en fin de chargement } start(); function recentrage() { //recentre la barre centrale en cas de redimensionement de la fenetre if(barre_centrale) { gauche=(document.body.clientWidth-204)/2; haut=(document.body.clientHeight-24)/2; if(gauche<0){gauche=0;} if(haut<0){haut=0;} document.all.cadre.style.pixelLeft=gauche; document.all.cacheblanc.style.pixelLeft=gauche+2; document.all.cadre.style.pixelTop=haut; document.all.cacheblanc.style.pixelTop=haut+2; document.all.barrebleu.style.pixelLeft=gauche+2; document.all.chiffre.style.pixelLeft=gauche+2; document.all.barrebleu.style.pixelTop=haut+2; document.all.chiffre.style.pixelTop=haut+2; } } window.onresize=recentrage; </script> <font face="verdana" size="2">Lorsque la barre est à 100% toutes les images sont préchargées dans le cache du navigateur et leur réaffichage est immédiat.</font> <div id="xiti" style="position:absolute;top:100px;left:10px"> <script language="JavaScript"> //XITI hsh = new Date(); hsd = document; hsi = '<a href="http://www.xiti.com/xiti.asp?s=44218"' hsi += ' TARGET="_top"><img width="39" height="25" border=0 ' hsi += 'src="http://logv11.xiti.com/hit.xiti?s=44218' hsi += '&p=&hl=' + hsh.getHours() + 'x' + hsh.getMinutes() + 'x' + hsh.getSeconds(); if(parseFloat(navigator.appVersion)>=4) {Xiti_s=screen;hsi += '&r=' + Xiti_s.width + 'x' + Xiti_s.height + 'x' + Xiti_s.pixelDepth + 'x' + Xiti_s.colorDepth;} hsd.writeln(hsi + '&ref=' + hsd.referrer.replace('&', '$') + '" title="Mesurez votre audience"></a>'); //FIN XITI </script> </div> <div id="voirscript" style="position:absolute;height:22px;width:130px;left:-108px;top:200px" onmouseover="attente(0)"> <a href="preload.htm"><img src="images/voir script_interface.jpg" height="22" width="130" border="0"></a> </div> <div id="telecharger" style="position:absolute;height:22px;width:130px;left:-108px;top:232px" onmouseover="attente(1)"> <a href="download/preload.zip"><img src="images/telecharger_interface.jpg" height="22" width="130" border="0"></a> </div> <div id="documentation" style="position:absolute;height:22px;width:130px;left:-108px;top:264px" onmouseover="attente(2)"> <a href="javascript:alert('Pas de documentation pour ce script !')"><img src="images/documentation_interface.jpg" height="22" width="130" border="0"></a> </div> </body> </html>
5 déc. 2007 à 07:26
neophyte en javascript, je ne sais pas si une adaptation du code est possible au niveau de var images_a_charger, afin que le script cherche tout seul les fichiers images du site (en recherchant par exemple les extensions de fichier .gif, .jpg et .png) au lieu de devoir taper les routes à chacune des images que l'on souhaite précharger.
Cela permettrait de rajouter du contenu d'image au site, sans avoir à retoucher à chaque fois le script...
30 mai 2004 à 21:45
Même sans connaissance en JS tu es censé savoir ça...
22 févr. 2004 à 21:16
j'ai une 30 images a incorporer sur le site par dossier ton script et valabe pour moi car j'ai aucune connaissance en language javascript
qu'est ce que un IE???
28 sept. 2003 à 18:00
28 sept. 2003 à 17:05
moi j'ai beaucoup raccourci en ne gardant que les fonctions start() et verif() et en les bidouillant pour les adapter a mon programme et ca marche du tonnerre !
Surtout pour moi j'ai un grand tableau d'images et ca ne fait plus le sale affichage totalement desorganisé comme j'avais avant, là les images arrivent une par une super rapidement !
merci pour ce script, c'est juste domage qu'il ne fonctionne que sur IE
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.