Prechargement des images
0/5 (8 avis)
Vue 23 533 fois - Téléchargée 861 fois
Description
Un script qui permet de précharger les images dans le cache du navigateur. Ainsi les images sont ensuites réaffichées imédiatement. Ce script est indispensable si vous avez besoin de réaliser un jeu en javascript utilisant les images. Sinon le navigateur recharge sans cesse les images en utilisant le modem, ce qui ralentir énormément le jeu. Script très utile.
Essayez le online sur http://www.iwaweb.net/ ou sur http://iwaweb.free.fr/navigateur.htm. @+
Source / Exemple :
<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>
Conclusion :
Essayez le online sur http://www.iwaweb.net/ ou sur http://iwaweb.free.fr/navigateur.htm. @+
Codes Sources
A voir également
- Prechargement des images
- Faire défiler des images en boucle html ✓ - Forum Javascript / DHTML
- Images defilantes en boucle - Forum PHP
- Faire défiler liste images ou vidéos dans un menu style IPOD en javascript???? - Forum Javascript / DHTML
- C# compare images ✓ - Forum C# / .NET
- Comment faire défiler des images avec le clavier ? - Forum Flash
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.