Prechargement des images

Télécharger le projet
Commenter

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.

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. @+
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (iwaweb)