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

Soyez le premier à donner votre avis sur cette source.

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

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 :

Ajouter un commentaire Commentaires

Signaler

jfs29

Messages postés: 2
Date d'inscription: vendredi 8 février 2013
Statut: Membre
Dernière intervention: 1 mars 2013

1 mars 2013 à 17:59

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.

Signaler

jfs29

Messages postés: 2
Date d'inscription: vendredi 8 février 2013
Statut: Membre
Dernière intervention: 1 mars 2013

28 févr. 2013 à 17:24

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 ?

Signaler

wizard512

Messages postés: 459
Date d'inscription: dimanche 9 janvier 2005
Statut: Membre
Dernière intervention: 11 mai 2013

23 févr. 2008 à 08:58

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

Signaler

AzertiX

Messages postés: 17
Date d'inscription: lundi 2 octobre 2006
Statut: Membre
Dernière intervention: 28 janvier 2018

19 janv. 2008 à 17:27

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

AzertiX

Messages postés: 17
Date d'inscription: lundi 2 octobre 2006
Statut: Membre
Dernière intervention: 28 janvier 2018

19 janv. 2008 à 16:50

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 :)

Afficher les 27 commentaires

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 :

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 :

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 !