Prechargement des images

Soyez le premier à donner votre avis sur cette source.

Vue 23 352 fois - Téléchargée 847 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.

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

Ajouter un commentaire Commentaires
Messages postés
5
Date d'inscription
mercredi 11 octobre 2006
Statut
Membre
Dernière intervention
26 septembre 2007

bonjour,

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...
Messages postés
121
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 mars 2006

Internet Explorer bien sur...
Même sans connaissance en JS tu es censé savoir ça...
Messages postés
8
Date d'inscription
mercredi 18 février 2004
Statut
Membre
Dernière intervention
28 mars 2009

bonjour
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???
Messages postés
56
Date d'inscription
dimanche 22 octobre 2000
Statut
Membre
Dernière intervention
14 décembre 2017
1
Merci.
Messages postés
35
Date d'inscription
dimanche 20 juillet 2003
Statut
Membre
Dernière intervention
13 février 2008

super !

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
Afficher les 8 commentaires

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.