CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 04:18:01

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

PRECHARGEMENT DES IMAGES

Information sur la source

Note :

5,50 / 10

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é :21 341 / 750

Auteur : iwaweb

Ecrire un message privé

Site perso

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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

IMAGES
- 3DFX.GIF 1 341 octets
- ATI.GIF 13 842 octets
- documentation_interface.jpg 1 818 octets
- MATROX.GIF 548 octets
- telecharger_interface.jpg 1 743 octets
- voir script_interface.jpg 1 726 octets
Iwaweb.url 77 octets
preload.htm 5 765 octets

Télécharger le zip

Sources du même auteur

DUREE - CALCULE LA DUREE PRÉCISE QUI S'EST ÉCOULÉE ENTRE 2 D...

RACINE CARRÉE

CALCULATRICE V1.0

MORPION

BARRES DÉROULANTES

Toutes les sources de iwaweb

Sources de la même categorie

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de BenLaKnet le 28/08/2002 08:55:14

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

Commentaire de BenLaKnet le 28/08/2002 09:05:57

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

Commentaire de iwaweb le 02/08/2003 19:01:34

Oui que sur IE, dsl :-(

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

Commentaire de iwaweb le 28/09/2003 18:00:43

Merci.

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

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

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

Derniers Blogs

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System