Bar de status pour le chargement des images avec pourcentage ( vrai )

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 109 fois - Téléchargée 28 fois

Contenu du snippet

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 / Exemple :


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

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

A voir également

Ajouter un commentaire

Commentaires

jfs29
Messages postés
2
Date d'inscription
vendredi 8 février 2013
Statut
Membre
Dernière intervention
1 mars 2013
-
Après avoir effectué les modifications préconisées par les intervenants précédents, le code fonctionne parfaitement sous internet explore 9, mais la barre ne s'affiche toujours pas sous firefox 19.0 et sous Chrome Version 25.0.1364.97 m. C'est donc à regret que je dois déclarer le navigateur de Microsoft vainqueur haut la main. D'où l'intérêt de ne pas respecter las règles en général et celles du W3C en particulier. J'ai en effet passé le code à la moulinette d'un vérificateur W3C. Après les modifications conseillées, plus rien ne fonctionnait, ni le cadre de préchargement ni le préchargement lui-même.
Pour le positionnement du cadre, laissez tomber. Après quelques tâtonnements, j'ai réussi à le placer où je voulais.
jfs29
Messages postés
2
Date d'inscription
vendredi 8 février 2013
Statut
Membre
Dernière intervention
1 mars 2013
-
Ce code mériterait sa très bonne note de 9,22/10 si on arrivait à afficher cette satanée barre de chargement.
J'ai passé l'après-midi à essayer des trucs. Rien n'y fait. Mais je ne suis pas un expert. Y-a-t-il une erreur dans le code ?
J'aurais aimé aussi pouvoir placer le cadre de préchargement au centre de l'écran. Toutes mes tentatives de changer la position
ont échoué, même en vidant le cache de mon navigateur. Pouvez-vous m'aider ?
wizard512
Messages postés
470
Date d'inscription
dimanche 9 janvier 2005
Statut
Membre
Dernière intervention
11 mai 2013
-
>> val3512 : Si sa sert a faire patientez le visiteur et à lui indiquer l'avancement total du chargement des images
AzertiX
Messages postés
17
Date d'inscription
lundi 2 octobre 2006
Statut
Membre
Dernière intervention
28 janvier 2018
-
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 ...
AzertiX
Messages postés
17
Date d'inscription
lundi 2 octobre 2006
Statut
Membre
Dernière intervention
28 janvier 2018
-
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 :)

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.