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

Commenter

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 :

A voir également

Bar de status pour le chargement des images avec pourcentage ( vrai )
Degré pourcentage - Forum VB.NET
Chargement de données - Forum C
Plan de chargement - Forum Visual Basic 6
Sql pourcentage - Forum SQL
Vba format pourcentage ✓ - Forum Visual Basic 6

S'inscrire maintenant

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.

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

Contenu du snippet

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (wizard512)

Prechargement d'image(s), avec barre de progression ( différente version ) [ 0% (x)html , 100% js ]

Une fonction qui dort ======> sleep( seconde );

Ajaxsimplifier en une seul fonction ( get && post )

[ sysfastcache v.1 ] systeme de cache, géré par une class

Une fonction pour la gestion du clavier et une autre pour l'interdiction de taper une touche non numérique [ ns, ff & ie ]

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (wizard512)

Prechargement d'image(s), avec barre de progression ( différente version ) [ 0% (x)html , 100% js ]

Une fonction qui dort ======> sleep( seconde );

Ajaxsimplifier en une seul fonction ( get && post )

[ sysfastcache v.1 ] systeme de cache, géré par une class

Une fonction pour la gestion du clavier et une autre pour l'interdiction de taper une touche non numérique [ ns, ff & ie ]

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !