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.
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
- Javascript write in div
- Précharger les images pour un meilleur rendu - Codes sources - Javascript (Navigation)
- Javascript : Precharger des images + barre de progression(progress bar) - CodeS SourceS - Guide
- Rollover ultra simple avec prechargement des images - Codes sources - Javascript (Graphique)
- Javascript : Prechargement d'image(s), avec barre de progression ( différente version ) - Guide
- Script de préchargement d'images - Codes sources - Javascript (Graphique)
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...
Même sans connaissance en JS tu es censé savoir ça...
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
1moi 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.