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

Ce site au démarrage

begin process at 2012 05 27 16:52:33

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

> BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )

BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )

Information sur la source

Note :

9,22 / 10

Catégorie :Effets Classé sous :prechargement, images, chargement, loading, pourcentage Niveau :Initié Date de création :16/04/2006 Date de mise à jour :21/01/2007 10:56:57 Vu :15 792

Auteur : wizard512

Ecrire un message privé

Commentaire sur cette source (25)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Voila un code qui permet d'observer le pourcentage du chargement des images d'un document.
En temps réel [ nombres d'images charger sur nombres d'images du document avec pourcentage ]
Ce script n'a pas besoin de configuration complexe ni de spécifier les images a charger
puisqu'il liste toutes les images du document ( d'oû l'importance de le metre a la fin de la page HTML )

Les Configuration ( simple ) a faire sont tous simplement :

   - Pour le temps en seconde aprés lequel la bar de chargement disparait quand le chargement est finie :
       Changer la valeur de la variable 'time' ( en seconde ) pour indiquer le temps souhaiter

   - Pour la couleur de la bar de chargement :
       Changer la valeur de la variable 'color' en indiquant le code de la couleur souhaiter
      ( ou meme le nom de la couleur en anglais bien sur ;] )

   - Pour la couleur de font de la bar de chargement ( les images du document pas encore charger ) :
       Changer la valeur de la variable 'bgcolor' ( pour le reste c'est exactement comme pour la variable 'color' )

   - Pour la police de caractère :
       Changer la valeur de la variable 'font' en indiquant le nom de la police de caractère souhaiter

   - Pour le temps maximum aprés lequel la bar de chargement disparait ( pour les lien mort d'image ) :
       Changer la caleur de la variable 'maxtime' en indiquant comme pour la variable 'time' le temps souhaiter
       en seconde aprés lequel la bar de chargement disparait

Source

var time = 1.5; // temps en seconde aprés lequel la bar de chargement disparait une finie
var color = "#006699"; // couleur de la bar de chargement
var bgcolor = "#000033"; // fond de la bar de chargement ( ce qui n'est pas encore charger )
var font = "monospace"; // Police du text du chargement
var maxtime = 60; // temps maximum aprés lequel la bar de chargement disparait
/* PAs touche */
var done = 0;
time = time * 1000;
maxtime = maxtime * 1000;
loaded = new Array();
function getElement( element )
{
if ( document.getElementById )
{
return document.getElementById( element );
}
else
{
if ( document.layers )
{
return document.element;
}
else
{
return document.all.element;
}
}
}
function Pre_load()
{
for( index = 0; index < document.images.length; index++ )
{
loaded[ index ] = false;
}
done = 0;
}
document.writeln( '<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>' );
window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", maxtime );
function Preload_Img()
{
imgs = document.images;
for( index = 0; index < imgs.length; index++ )
{
if( done >= imgs.length )
{
break;
}
else if( imgs[ index ].complete && loaded[ index ] == false )
{
done++;
loaded[ index ] = true;
}
}
if( done >= imgs.length )
{
window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", time );
}
else
{
window.setTimeout( "Preload_Img()", '50' );
}
PRC = Math.round( ( ( done / imgs.length ) * 100 ) );
preview = '<table border="0" style="font-family:' + font + ';">'+
' <tr>'+
' <td> </td>'+
' <td> </td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td>'+
' <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
' <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
' </span>'+
' </span>'+
' </td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td> </td>'+
' <td> </td>'+
' </tr>'+
'</table>';
getElement( 'Loading_Img' ).innerHTML = preview;
}
Pre_load();
Preload_Img();

	var time = 1.5;           // temps en seconde aprés lequel la bar de chargement disparait une finie
	var color = "#006699";    // couleur de la bar de chargement
	var bgcolor = "#000033";  // fond de la bar de chargement ( ce qui n'est pas encore charger )
	var font = "monospace";   // Police du text du chargement
	var maxtime = 60;         // temps maximum aprés lequel la bar de chargement disparait

		/* PAs touche */
		var done = 0;
		time = time * 1000;
		maxtime = maxtime * 1000;
		loaded = new Array();

	function getElement( element )
	{
		if ( document.getElementById ) 
		{ 
			return document.getElementById( element );
		} 
			else 
		{ 
			if ( document.layers ) 
			{ 
				return document.element;
			} 
				else 
			{ 
				return document.all.element;
			} 
		} 
	}

		function Pre_load()
		{
			for( index = 0; index < document.images.length; index++ )
			{
				loaded[ index ] = false;
			}
                                done = 0;
		}

	document.writeln( '<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>' );
	window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", maxtime );
		
	function Preload_Img()
	{
		imgs = document.images;

			for( index = 0; index < imgs.length; index++ )
			{	
				if( done >= imgs.length )
				{
					break;
				}
					else if( imgs[ index ].complete && loaded[ index ] == false )
				{
					done++;
					loaded[ index ] = true;
				}
			}
			
			if( done >= imgs.length )
			{
				window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", time );
			}
				else
			{
				window.setTimeout( "Preload_Img()", '50' );
			}

		PRC = Math.round( ( ( done / imgs.length ) * 100 ) );
			
		preview = '<table border="0" style="font-family:' + font + ';">'+
	  			  ' <tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>  </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '	<tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '	<tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>'+
				  '          <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
				  '                <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
				  '                </span>'+
				  '         </span>'+
				  '     </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
	  			  ' <tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>  </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '</table>';

		getElement( 'Loading_Img' ).innerHTML = preview;
	}
	
	Pre_load();
	Preload_Img();

Conclusion

Pour un petit exemple ajouter l'encadrer si dessous ( 85 images prises aux hasard ) avant le script :
[ la taille est uniquement limiter pour éviter d'avoir un gros basard ]
( Il se peux qu'avec le temps, certain lien soit mort )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<img width=50 src="http://www.generationmp3.com/images/tests/iri vert10/IMG_1356.jpg">
<img width=50 src="http://www.generationmp3.com/images/tests/H10 /DSCN3947.jpg">
<img width=50 src="http://sbalai.free.fr/hosted/ism/taille%20par %20rapport%20billets.jpg">
<img width=50 src="http://www.avtec.com/var/avtec/storage/images /products/simulation_test_systems/ops_rf_geolocati on_test/4187-20-eng-US/ops_rf_geolocation_test.jpg ">
<img width=50 src="http://www.sandia.gov/news-center/news-releas es/2005/images/solar-test.jpg">
<img width=50 src="http://www.phil.uu.nl/~xges/images/daikon.jpg ">
<img width=50 src="http://www.blaha.net/images/Test%202%20600dpi %206x6.jpg">
<img width=50 src="http://weblog.redisdead.net/images/test-brown ie.jpg">
<img width=50 src="http://semopyworld.free.fr/montages/Test%20Pr esence%20ELECTRIQUE.jpg">
<img width=50 src="http://spider.ipac.caltech.edu/staff/jarrett/ 2mass/3chan/cool/abell_3627small_1.5X1.5.jpg">
<i mg width=50 src="http://www.naminjazz.be/images/1803.png">
<i mg width=50 src="http://www.google.fr/intl/fr_fr/images/logo.g if">
<img width=50 src="http://images.google.fr/images?q=tbn:iQoZVmWG ad6fBM:www.etw.de/windtunnel/ts/model.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:na6XJEaj b08gZM:photo1.dukenews.duke.edu/pages/div.test/div .test.4.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:mf_u-VI4 9ITSuM:www.oxford.anglican.org/youthblog/archives/ test%2520card%25202.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:KJ6-41IC vmd5GM:map05.gsfc.nasa.gov/data/MODIS/tc/test-data /A2005099123000.L1B_LAC.6S_28S_58E_85E-4km.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:sfEasz-s M9SkOM:sprott.physics.wisc.edu/fractals/collect/19 95/TEST.JPG">
<img width=50 src="http://eur.a1.yimg.com/eur.yimg.com/a/eu/any/ couplewine1.jpg">
<img width=50 src="http://eur.i1.yimg.com/eur.yimg.com/i/fr/se/b /charm.jpg">
<img width=50 src="http://eur.i1.yimg.com/eur.yimg.com/i/fr/mu/z /place.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/420365913.gi f">
<img width=50 src="http://polybomb.skyblog.com/pics/422162407_sm all.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/420363831_sm all.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/353465581.jp g">
<img width=50 src="http://polybomb.skyblog.com/pics/414802033_sm all.jpg">
<img width=50 src="http://www.prechargement.com/images/big-memor y.jpg">
<img width=50 src="http://elmaerror.free.fr/LMA800.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/VeNgE.jp g">
<img width=50 src="http://www.u-blog.net/resetparam/img/bunk.jpg ">
<img width=50 src="http://www.u-blog.net/resetparam/img/berKe.jp g">
<img width=50 src="http://www.u-blog.net/resetparam/img/MAn.gif" >
<img width=50 src="http://www.u-blog.net/resetparam/img/Lost.jpg ">
<img width=50 src="http://www.u-blog.net/resetparam/img/Mkehands .gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/Micropoi ntDark.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/need_you .gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/maths.jp g">
<img width=50 src="http://www.u-blog.net/resetparam/img/msfn.jpg ">
<img width=50 src="http://www.u-blog.net/resetparam/img/Untitled -1.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/zombie.p ng">
<img width=50 src="http://www.u-blog.net/resetparam/img/MKe_Sepp uku.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/Innocent K.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/mHdK.jpg ">
<img width=50 src="http://www.u-blog.net/resetparam/img/EaTV.png ">
<img width=50 src="http://www.u-blog.net/resetparam/img/bonoms.g if">
<img width=50 src="http://www.u-blog.net/resetparam/img/mouthsou nd.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/lorem.jp g">
<img width=50 src="http://www.u-blog.net/resetparam/img/cheperno el.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/flying.g if">
<img width=50 src="http://www.u-blog.net/resetparam/img/HC.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/zombitek .jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/indatown .jpg">
<img width=50 src="http://piem2.free.fr/zbruraccords.gif">
<img width=50 src="http://img7.exs.cx/img7/6595/scared3.gif">
< img width=50 src="http://elmaerror.free.fr/LMA800.gif">
<img width=50 src="http://solarphp.com/svn/img/src/solar_logo_fl at.png">
<img width=50 src="http://wingolog.org/wp-content/ale_-_mu_eka_d anza_full.jpg">
<img width=50 src="http://www.midori.com/okbys/hana/gekka02.gif" >
<img width=50 src="http://www.midori.com/okbys/hana/gekka01.gif" >
<img width=50 src="http://www.mmaa.org/sites/4d7874e8-0b8f-4445- 9da2-d00c8bec7902/uploads/Bruce_Cheech.jpg">
<img  width=50 src="http://kepler.mech.tohoku.ac.jp/activity/book 1.jpg">
<img width=50 src="http://www.therightwaymoving.com/images/banne r1.gif">
<img width=50 src="http://www.evolnet.ch/evolution/uploads/hubbl e1.jpg">
<img width=50 src="http://www.cv.nrao.edu/~pmurphy/Talks/imagesw eb/ireland_20050205.jpg">
<img width=50 src="http://foto.radikal.ru/0601/1064f17528ba.jpg" >
<img width=50 src="http://i3.photobucket.com/albums/y67/missdrel la/jdcorn.jpg">
<img width=50 src="http://www.mattjonesblog.com/img/dancuban.jpg ">
<img width=50 src="http://i12.photobucket.com/albums/a225/nikkit alkalot/walmart22.jpg">
<img width=50 src="http://straydog.way-nifty.com/yamaokashunsuke /images/50_3.jpg">
<img width=50 src="http://1984.serpent.pl/varia/fanzin1.jpg">
< img width=50 src="http://www.gtabloggers.com/jimmunroe.jpg">
< img width=50 src="http://80.237.203.119/Commandernachrichten2.j pg">
<img width=50 src="http://tinypic.com/iqzuv4.gif">
<img width=50 src="http://www.uni-koeln.de/organe/presse/pisyste m/mehr/dep.jpg">
<img width=50 src="http://www.mediaeater.com/pictures/2002/July_ 2002/misc/art/sorry.gif">
<img width=50 src="http://www.skinbase.org/files/zoom/1-A_Month_ of_Sundays.jpg">
<img width=50 src="http://www.opticalcloseouts.com/images/frames /large_ainvestment%2016a.jpg">
<img width=50 src="http://i6.photobucket.com/albums/y244/takingb ackjuice/juice/tiaspics013.jpg">
<img width=50 src="http://i33.photobucket.com/albums/d81/Msiti/C IMG0306.jpg">
<img width=50 src="http://www.dcresource.com/reviews/kyocera/fin ecam_s3-review/KIF_0031.JPG">
<img width=50 src="http://www.andriaroberto.com/Pianta%20del%20B urg.jpg">
<img width=50 src="http://img369.imageshack.us/img369/3852/owned yourebirthandbatch2ea.jpg">
<img width=50 src="http://herakles.zcu.cz/informal/others/2004-e ci/src%5Cimg_0206.jpg">
<img width=50 src="http://4travel.jp/img/tcs/t/album/src_1002864 4.jpg">
<img width=50 src="http://4travel.jp/img/tcs/calendar/src_100005 78.jpg">
<img width=50 src="http://aki-maeda-radio.site.voila.fr/ban.bmp" >

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Puis tester  ;)

########################################## ################################################## #

Regarder la capture du script ( un peut plus haut ) et vous pouvez observer qu'en bas de
la page du navigateur il est indiquer par le navigateur qu'il reste 22 images a charger
exactement comme l'indique la bar et l'enoncer de chargement sauf qu'il y en a un de moin
( le navigateur = 22 images restantes alors que l'enoncer 23 images restantes ( 85 - 62 = 23 ) )
car le lien d'une des images du document est volontairement corrompu ( lien mort ) afin de
vous montrer qu'a la fin du chargement des images l'enoncer nous affichera '99%' pour ce document.
Car telle est l'etat de la page Donc l'etat du chargement
est donc bien reel......         ;)

############################################ #################################################

Historique

16 janvier 2007 23:13:13 :: Mise a jour de la fonction Pre_load ;) Vive Ajax.....
21 janvier 2007 10:56:57 :: Rajout d'une fonction "getElement( 'id' );" qui je l'espert règlera les problèmes de compatibilité entre navigateur, IE, FireFox, Opera, ..... A vous de me l'indiquer ;)

Sources du même auteur

PRECHARGEMENT D'IMAGE(S), AVEC BARRE DE PROGRESSION ( DIFFÉR...

UNE FONCTION QUI DORT ======> SLEEP( SECONDE );

AJAXSIMPLIFIER EN UNE SEUL FONCTION ( GET && POST )

UNE FONCTION POUR LA GESTION DU CLAVIER ET UNE AUTRE POUR L'...

LISTER LES PLUG-INS INSTALLÉ DU BROWSER (IE SEULEMENT)

Toutes les sources de wizard512

Sources de la même categorie

BOUTON ROTATIF par kazma

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

PETIT SCRIPT DE CHANGEMENT (COMMUTATION) D'IMAGE EN FONCTION... par reynum

PRECHARGEMENT D'IMAGE(S), AVEC BARRE DE PROGRESSION ( DIFFÉR... par wizard512

FAUSSE PAGE DE CHARGEMENT par ndubien

BARRE DE CHARGEMENT par stfou

Commentaires et avis

Commentaire de wizard512 le 16/04/2006 23:05:43

J'espère que cette source servira a des personnes qui en on bien besoin

;)

Commentaire de Phil_Free le 17/04/2006 15:30:59

Salut,

Pour le titre tu devrais plutôt indiquer:

Barre d'avancement du chargement des images...

Commentaire de johann1 le 17/04/2006 16:39:19

Bonjour Wizard,

Je n'ai pas de résultat, y a t'il quelque chose qui m'a échappé!?
Je ne vois pas! Veux-tu jeter un coup d'oeil: Voici une page où j'utilise un loading que je n'aime pas trop
http://business-internet.voicemessenger.biz/
Voici où se trouve le tien: http://business-internet.voicemessenger.biz/FR/Toutes-les-selles-mexicaines.htm

Merci à toi... (Et je suis déjà persuadé du succès de ta source)

Commentaire de wizard512 le 17/04/2006 19:49:47

Je crois que j'ai trouver ( aprés avoir enregistrer la page et l'avoir ouvert )
Enlève la ligne 22 de ma source ( voir plus haut ) c'est la div ou va s'afficher le chargement.
Puis place la juste aprés la balise body de ta page ( ligne 8 du script de ton document )
Puis normalement sa devrai aller ( normalement .... )
bref si sa marche pas reviens me le signaler ( en espérant que sa marche :] )

voila ... ;)

Commentaire de johann1 le 17/04/2006 20:59:44

Super génial Wizard! Merci!!! Ca marche du tonnerre! J'ai suivi ton conseil, et le résultat est là!:
http://business-internet.voicemessenger.biz/

Bref, ca donne ceci:
juste après le <body>-->

<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>

Juste avant </body> --->

<script> // JavaScript Document
var time = 1.5; // temps en seconde apres lequel la bar de chargement disparait une finie
    var color = "#006699"; // couleur de la bar de chargement
    var bgcolor = "#000033"; // fond de la bar de chargement ( ce qui n'est pas encore charger )
    var font = "monospace"; // Police du text du chargement
    var maxtime = 60; // temps maximum apres lequel la bar de chargement disparait

        /* PAs touche */
        var done = 0;
        time = time * 1000;
        maxtime = maxtime * 1000;
        loaded = new Array();

        function Pre_load()
        {
            for( index = 0; index < document.images.length; index++ )
            {
                loaded[ index ] = false;
            }
        }


    window.setTimeout( "document.all.Loading_Img.style.visibility='hidden';", maxtime );

    function Preload_Img()
    {
        imgs = document.images;

            for( index = 0; index < imgs.length; index++ )
            {
                if( done >= imgs.length )
                {
                    break;
                }
                    else if( imgs[ index ].complete && loaded[ index ] == false )
                {
                    done++;
                    loaded[ index ] = true;
                }
            }

            if( done >= imgs.length )
            {
                window.setTimeout( "document.all.Loading_Img.style.visibility='hidden';", time );
            }
                else
            {
                window.setTimeout( "Preload_Img()", '50' );
            }

        PRC = Math.round( ( ( done / imgs.length ) * 100 ) );

        preview = '<table border="0" style="font-family:' + font + ';">'+
                  ' <tr>'+
               '        <td>  </td>'+
          '        <td>  </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>  </td>'+
          '        <td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>  </td>'+
          '        <td>'+
                 ' <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
                 ' <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
                 ' </span>'+
                 ' </span>'+
                 ' </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                  ' <tr>'+
               '        <td>  </td>'+
          '        <td>  </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '</table>';

        document.all.Loading_Img.innerHTML = preview;
    }

    Pre_load();
    Preload_Img();

</script>

ENCORE MERCI!

Commentaire de wizard512 le 17/04/2006 21:01:57

De rien c'est moi qui te remercie d'avoir utiliser ma source !!!

@_@ Et bon prog ;)

Commentaire de whoetbe le 18/04/2006 13:29:56

Ca fonctionne bien, sauf lorsque des images sont introuvable et ne sont pas chargées.

Commentaire de wizard512 le 18/04/2006 18:20:13

Oui quand des images ont effectivement des lien morts
la bars de pourcentage ne s'efface qu'aprés le temps
indiquer dans la variable 'maxtime'
( c'est pour sa qu'il faut qu'il ne soit pas trop grand )
Environ : 15 Secondes

Voila

Commentaire de whoetbe le 19/04/2006 09:15:52

Merci wizard. Bien contourné ;-) !

Commentaire de mickaelpfr le 19/04/2006 10:23:09

yop belle source , pas regardé le code mais cette source pourrais m'être utile :)

Commentaire de DS JENOVA le 16/06/2006 13:27:49

vraiment super code, voila deja un bout de temps que j'en cherchai un comme sa
MERCI

Commentaire de wizard512 le 16/01/2007 23:10:25

Juste une petite remarque j'ai configuré le code,
fonction ( Pre_load() ),
parseque suite une petite réflexion,
il aura besoin de cette petite configuration :

        function Pre_load()
        {
            for( index = 0; index < document.images.length; index++ )
            {
                loaded[ index ] = false;
            }
done = 0;
        }

car il faut aussi réiniatialisé done a 0,
car supposont par exemple
qu'une partie de la page change constament,
par exemple une navigation en Ajax ( simplifier en une seul fonction [ voir mes sources ] ),
et une modification grace a innerHTML,
se qui est mon cas en ce moment même où je vous parle,
en utilisant cette 'technike" je crée un site,
mais supposont que la page (Y) fait appelle a la page (X) grace a Ajax [ qui contient 4 images ],
et que l'on utilise ce script de pourcentage,
tous marche pour l'instant,
mais ensuite supposont que (Y) fait appelle a (Z),
toujours grace a Ajax, et que la page (Z) contient elle 2images,
même en ré-initialisant grace a Pre_load(), vous obtiendrez [ 4/2 chargé, 200% ]
car done = 4; ( si elle a finit de tous charger )

Bref le résultat sera forcément érroné, donc en gros, moi je vais arrété de parler,
et pi voila, faite juste la mise à jour si vous utilisé Ajax sinon je crois pas que sa changera quelque chose.....

Bonne soiré & Bon CodE..................                     ;)

Commentaire de wizard512 le 21/01/2007 10:59:31

Rajout d'une fonction pour une meilleur compatibilité entre navigateur,
il est vivement conseillé de metre à jours cette source si vous l'avez placer sur votre site.

Normalement avec cette mise a jours on ne devrait pas avoir de souci,
entre FireFox, IE, Opéra, Etc.....

Commentaire de 1bhrunoh le 09/03/2007 20:59:57

Vraiment bravo. Je n'ai pu m'enpecher de réagir... le code est simple à appréhender et facillement adaptable. Perso, si j'arrive à le rendre compatible pour la plus part des navigateur je te fais signe Wizzard ou si tu y arive avant, priere de nous faire signe. Merci encore et bonne chance à toi.

Commentaire de stfou le 06/04/2007 21:08:32

Euh... et si il n'y a pas d'images ?

Commentaire de wizard512 le 07/04/2007 16:00:19

Ok, merci 1bhrunoh de tes efforts ^^
STFOU => S'il n'y a aucune image pourquoi mettre se code....?

Commentaire de stfou le 07/04/2007 16:33:25

Oui, j'avais mal lu le titre : BAR DE STATUS POUR LE CHARGEMENT DES PAGEs, comme quoi, il faut toujours tourner 7 fois sa souris autour du bouton accepter avant de cliquer :D (adaptation d'un proverbe connu).

Commentaire de stfou le 07/04/2007 16:35:05

Sinon super source pour par exemple un diaporama, une galerie photo etc...
10/10

Commentaire de wizard512 le 07/04/2007 19:34:45

lol, sa peux arriver, normale
merci pour ta note

Commentaire de stfou le 07/04/2007 20:38:19

Derien ;)

Commentaire de val3512 le 25/11/2007 15:58:09

ca ne sere pas a grand chose ... esperons que sa serve a d'autres .. le chargement d'image .

Commentaire de AzertiX le 19/01/2008 14:56:19

Bonjour, je viens de tester ce code, et cela semble fonctionner, mais je ne vois pas la barre de chargement.
Je vois seulement le texte :
Chargement : 88%
( 7 / 8 ) image(s)

Sinon, j'aimerais que ma page ne s'affiche que lorsque TOUTES les images ont été chargées et qu'on ne voie que la barre de chargement pendant ce temps. Est-ce possible ?
Je sais qu'il existe une propriété "complete" qui indique si le navigateur a terminé le chargement de l'image.

Merci d'avance pour vos réponses.

Commentaire de AzertiX le 19/01/2008 16:50:07

Autre truc, je viens de mettre le script sur mon site, ici :
http://philippedomergue.free.fr/index2.html
Sur le menu (à gauche) et sur la page ¼uvres.

Plusieurs "soucis" :
- Depuis que j'ai mis le script, j'ai une barre de défilement horizontale qui est apparue en bas de mon menu.
- La barre s'affiche même lorsque les images sont déjà mises en cache (quand on actualise la même page).
- Pour mon menu, j'aimerais faire en sorte que les images se pré-chargent, mais que la barre de chargement ne s'affiche pas. Quelle partie(s) du code je dois enlever ?

Bon, voilà. Désolé de bombarder de questions comme ça, mais je pense que ça pourra aussi être utile à d'autres utilisateurs :)

Commentaire de AzertiX le 19/01/2008 17:27:33

Oh stupeur !
En fait ma barre de chargement est toute moche seulement avec Firefox (que j'utilise 99% du temps). J'ai testé avec IE et la barre est vraiment mieux.
En fait, j'ai vu d'où venait le souci d'affichage :
la syntaxe CSS est mauvaise, et comme Firefox respecte les normes (contrairement à IE qui s'en fout), il a pas aimé.
Il faut remplacer :
style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;" ligne 41
Par :
style="border:1;border-color:red;border-style:solid;position:absolute;left:35%;top:35%;background-color:white;"
Et de même, remplacer la ligne 86 :
style="background-color:' + bgcolor + ';width:200px;border:1 red solid;"
Par :
style="background-color:' + bgcolor + ';width:200px;border:1;border-color:red;border-style:solid;"

Ceci résolut le problème des bordures, mais on ne voit toujours pas l'évolution du chargement de la barre.
Je vais essayer de trouver une solution ...

Commentaire de wizard512 le 23/02/2008 08:58:41

>> val3512 : Si sa sert a faire patientez le visiteur et à lui indiquer l'avancement total du chargement des images

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Pourquoi mon pre-chargement d'images ne marche pas toujours ? [ par sunelis ] Salut a tous J'ai des boutons a base d'images survolees.Le probleme c'est que les images secondaires (qd la souris est au dessu des boutons) sont rech controle de chargement de sons [ par theyann ] existe t il une variable pour le controle de chargementdes embed comme pour les images ?Img = new Image(); Img.src = 'images/toto.gif';if( Img.complet Chargement d une image [ par adakick ] Bonjour, Sur mon site j'ai des images assez lourde et je voudrais qu'en attendant que ces images se chargent en affiché d autre du genre : <img title Probleme d'arret de chargement lors d'un evenement javascript [ par super_mamie ] Bonjour.Je vous expose mon probleme:Je suis en train de faire une gallerie d'images.Dans la galerie, il y a une animation flash qui appelle une foncti fonction chargement pour gallerie Interne HTML [ par karaziel ] Bonjour,Voilà, j'ai réalisé un site de gallerie web au norme XHTML/CSS sur dreamweaver. Mon site ne contient qu'une page, l'index. tout est réaliser s prechargement d'image [ par mickadevelop ] Bonjour à toutes et tous,je me pose la question suivante :si sur une page nous avons par exemple 10 images de tel façon que nous ayons 10 balises < Chargement dynamique d'images [ par Kevin.Ory ] Bonjour à tous,Je voudrais créer une galerie d'image avec un effet de fondu lors du changement de l'image affiché. Hors je ne voudrais pas précharger prechargement des image [ par baryta ] Bonjour à tous Cela fait quelques jours que je cherche à résoudre le préchargement de mes images. J'ai trouvé le code javascrip pour les précharger. J Display:none et images [ par sonofgod2 ] Bonjour,j'ai recement découvert un petit script qui me permet d'afficher ou de cacher des Divs, et ça pour les sites internet c'est trés appréciable : prechargement d image ?? [ par gabs77 ] slt, donc voila g fait un diaporama automatique en php/javascript et sa fonctionne bien en revanche est ce que quelqu'un peut me donner un conseil ou

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP