Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PRECHARGEMENT DES IMAGES


Information sur la source

Catégorie :Graphique Niveau : Initié Date de création : 27/08/2002 Date de mise à jour : 23/11/2002 12:20:20 Vu / téléchargé: 17 897 / 695

Note :
5,5 / 10 - par 4 personnes
5,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

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

  • <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>
 <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. @+  
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de BenLaKnet le 28/08/2002 08:55:14

sympa ! ... mais ça marche que sur IE ???

signaler à un administrateur
Commentaire de BenLaKnet le 28/08/2002 09:05:57

sympa ! ... mais ça marche que sur IE ???

signaler à un administrateur
Commentaire de iwaweb le 02/08/2003 19:01:34

Oui que sur IE, dsl :-(

signaler à un administrateur
Commentaire de cresus18 le 28/09/2003 17:05:20

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

signaler à un administrateur
Commentaire de iwaweb le 28/09/2003 18:00:43

Merci.

signaler à un administrateur
Commentaire de jcb54 le 22/02/2004 21:16:29

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???

signaler à un administrateur
Commentaire de WindPowa le 30/05/2004 21:45:20

Internet Explorer bien sur...
Même sans connaissance en JS tu es censé savoir ça...

signaler à un administrateur
Commentaire de novato le 05/12/2007 07:26:52

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...

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,328 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.