AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 07 04 16:26:25
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 !

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


Information sur la source

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 : 12 707
Auteur : wizard512 Ecrire un message privé
Note :
9,22 / 10 - par 9 personnes
9,22 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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/irivert10/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_geolocation_test/4187-20-eng-US/ops_rf_geolocation_test.jpg">
<img width=50 src="http://www.sandia.gov/news-center/news-releases/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-brownie.jpg">
<img width=50 src="http://semopyworld.free.fr/montages/Test%20Presence%20ELECTRIQUE.jpg">
<img width=50 src="http://spider.ipac.caltech.edu/staff/jarrett/2mass/3chan/cool/abell_3627small_1.5X1.5.jpg">
<img width=50 src="http://www.naminjazz.be/images/1803.png">
<img width=50 src="http://www.google.fr/intl/fr_fr/images/logo.gif">
<img width=50 src="http://images.google.fr/images?q=tbn:iQoZVmWGad6fBM:www.etw.de/windtunnel/ts/model.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:na6XJEajb08gZM:photo1.dukenews.duke.edu/pages/div.test/div.test.4.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:mf_u-VI49ITSuM:www.oxford.anglican.org/youthblog/archives/test%2520card%25202.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:KJ6-41ICvmd5GM: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-sM9SkOM:sprott.physics.wisc.edu/fractals/collect/1995/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.gif">
<img width=50 src="http://polybomb.skyblog.com/pics/422162407_small.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/420363831_small.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/353465581.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/414802033_small.jpg">
<img width=50 src="http://www.prechargement.com/images/big-memory.jpg">
<img width=50 src="http://elmaerror.free.fr/LMA800.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/VeNgE.jpg">
<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.jpg">
<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/MicropointDark.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.jpg">
<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.png">
<img width=50 src="http://www.u-blog.net/resetparam/img/MKe_Seppuku.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/InnocentK.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.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/mouthsound.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/lorem.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/chepernoel.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/flying.gif">
<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_flat.png">
<img width=50 src="http://wingolog.org/wp-content/ale_-_mu_eka_danza_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/book1.jpg">
<img width=50 src="http://www.therightwaymoving.com/images/banner1.gif">
<img width=50 src="http://www.evolnet.ch/evolution/uploads/hubble1.jpg">
<img width=50 src="http://www.cv.nrao.edu/~pmurphy/Talks/imagesweb/ireland_20050205.jpg">
<img width=50 src="http://foto.radikal.ru/0601/1064f17528ba.jpg">
<img width=50 src="http://i3.photobucket.com/albums/y67/missdrella/jdcorn.jpg">
<img width=50 src="http://www.mattjonesblog.com/img/dancuban.jpg">
<img width=50 src="http://i12.photobucket.com/albums/a225/nikkitalkalot/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.jpg">
<img width=50 src="http://tinypic.com/iqzuv4.gif">
<img width=50 src="http://www.uni-koeln.de/organe/presse/pisystem/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/takingbackjuice/juice/tiaspics013.jpg">
<img width=50 src="http://i33.photobucket.com/albums/d81/Msiti/CIMG0306.jpg">
<img width=50 src="http://www.dcresource.com/reviews/kyocera/finecam_s3-review/KIF_0031.JPG">
<img width=50 src="http://www.andriaroberto.com/Pianta%20del%20Burg.jpg">
<img width=50 src="http://img369.imageshack.us/img369/3852/ownedyourebirthandbatch2ea.jpg">
<img width=50 src="http://herakles.zcu.cz/informal/others/2004-eci/src%5Cimg_0206.jpg">
<img width=50 src="http://4travel.jp/img/tcs/t/album/src_10028644.jpg">
<img width=50 src="http://4travel.jp/img/tcs/calendar/src_10000578.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 ;)

Commentaires et avis

signaler à un administrateur
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

;)

signaler à un administrateur
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...

signaler à un administrateur
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)

signaler à un administrateur
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 ...  ;)

signaler à un administrateur
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>&nbsp;&nbsp;</td>'+
          '        <td>&nbsp;&nbsp;</td>'+
          ' <td>&nbsp;&nbsp;</td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>&nbsp;&nbsp;</td>'+
          '        <td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
          ' <td>&nbsp;&nbsp;</td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>&nbsp;&nbsp;</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>&nbsp;&nbsp;</td>'+
                  '    </tr>'+
                  ' <tr>'+
               '        <td>&nbsp;&nbsp;</td>'+
          '        <td>&nbsp;&nbsp;</td>'+
          ' <td>&nbsp;&nbsp;</td>'+
                  '    </tr>'+
                 '</table>';
  
        document.all.Loading_Img.innerHTML = preview;
    }
    
    Pre_load();
    Preload_Img();

</script>

ENCORE MERCI!

signaler à un administrateur
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     ;)

signaler à un administrateur
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.

signaler à un administrateur
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

signaler à un administrateur
Commentaire de whoetbe le 19/04/2006 09:15:52

Merci wizard. Bien contourné ;-) !

signaler à un administrateur
Commentaire de mickaelpfr le 19/04/2006 10:23:09

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

signaler à un administrateur
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

signaler à un administrateur
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..................                     ;)

signaler à un administrateur
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.....

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de stfou le 06/04/2007 21:08:32

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

signaler à un administrateur
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....?

signaler à un administrateur
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).

signaler à un administrateur
Commentaire de stfou le 07/04/2007 16:35:05

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

signaler à un administrateur
Commentaire de wizard512 le 07/04/2007 19:34:45

lol, sa peux arriver, normale
merci pour ta note

signaler à un administrateur
Commentaire de stfou le 07/04/2007 20:38:19

Derien ;)

signaler à un administrateur
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 .

signaler à un administrateur
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.

signaler à un administrateur
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 :)

signaler à un administrateur
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 ...

signaler à un administrateur
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 &lt; 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 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 Images mappé [ par darkwhite ] Salut a tous. Je suis debutant et je m'attaque au image mappé.J'ai ecrit le code suivant:&lt;IMG SRC=images/map_picture.jpg USERMAP="#map1"&gt;&lt;MAP


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


Apple iPod touch 2nde Gén. Noir 8 Go (Mac/PC)
Entre 209€ et 345€


Visiter le guide achat

Photothèque Nouveau !

Photo friends at the beach.Photo pretty girls
Photo femme, plage, bien être, soleil, vacances, été, détente, reposPhoto joint et feuille de cannabis

Visiter la photothèque


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,374 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é.