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

Soyez le premier à donner votre avis sur cette source.

Vue 16 898 fois - Téléchargée 1 373 fois

Description

Voici un systeme de préchargement d'image(s)
fait entièrement en javascript ( ormi les barres de progression ),
sous forme de classe, simple d'utilisation , trés efficace, et
surtout compatible avec pas mal de navigateur ( FF , IE , NS , .... )

Je l'ai développer pour un de mes projets et donc une fois réalisée,
je me suis dis pourquoi pas le faire profiter a tous le monde,
vous me dirait vos impression ( bonne ou mauvaise ),
et aussi vous m'indiquerai vos suggestions constructive.....

....si vous le souhaitez.

Zip complet avec test : http://www.megaupload.com/?d=YXQJYZIU

Source / Exemple :


<!--

	// vérifie si la variable est vide ou non
	function empty()
	{
		arg = empty.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucune variable n'a été spécifier !" );
				return -1;
			}
		
		if( arg[ 0 ] == "" )
		{
			return true ;
		}
			return false;
	}

	// Vérification si la variable == null
	function is_null()
	{
		arg = is_null.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucune variable n'a été spécifier !" );
				return -1;
			}
		
		if( arg[ 0 ] == null )
		{
			return true ;
		}
			return false;
	}
	
	// Supprime les espaces avant et aprés la chaine spécifier
	function trim()
	{
		arg = trim.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucune chaine n'a été spécifier !" );
				return;
			}
		
		arg[ 0 ] = arg[ 0 ].replace( /^(\s)*/ , '' );
		arg[ 0 ] = arg[ 0 ].replace( /(\s)*$/ , '' );
		
		return arg[ 0 ];
	}

	// Renvoya l'élément spécifier en arguments
	function getElement( div )
    {
        if ( document.getElementById )
        {
            return document.getElementById( div );
        }

        if ( document.layers )
        {
            return document.div;
        }
            return document.all.div;
    }
 
	// Création d'image : makeImage( src , x , y );
	function makeImage()
	{
		arg = makeImage.arguments;
		
			if( arg.length < 1 || empty( arg[ 0 ] ) )
			{
				alert( "Aucune image spécifier" );
				return null;
			}
			
			if( document.images )
			{
				var img;				
				
					if( arg.length > 2 && !empty( arg[ 1 ] ) && !empty( arg[ 2 ] ) )
					{
						img = new Image( arg[ 1 ] , arg[ 2 ] );
					}
						else
					{
						img = new Image();
					}
			
				img.src = trim( arg[ 0 ] );
				
				return img;
			}
				return null;
	}

	
	/* FONCTION POUR LA CLASSE DE PRECHARGEMENT */

	//Fonction apeller une fois le préchargement effectuer et terminer : A vous de la coder ; elle est inclut dans la classe
	function DonePreload()
	{
		// votre fonction
		location.href = 'page.html' ;
	}
	
	// Ajout d'objet(s)
	function AddObject()
	{
		arg = this.AddObject.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucun Objet n'a été spécifier" );
				return;
			}
		
		for( index = 0; index < arg.length; index++ )
		{
			this.Objects[ this.Objects.length ] = arg[ index ];
		}
		
		this.SortObjects();
	}
	
	// trie d'objet(s)
	function SortObjects()
	{
		objt = this.Objects;
		news = new Array();
		
		exist = false;
		
		for( index = 0; index < objt.length; index++ )
		{
			if( !empty( trim( this.Objects[ index ] ) ) )
			{
				for( index0 = 0; index0 < objt.length; index0++ )
				{
					if( objt[ index0 ] == objt[ index ] && index != index0 )
					{
						objt[ index ] = "";
						exist = true;
						break;
					}
				}
				
					if( !exist )
					{
						news[ news.length ] = trim( this.Objects[ index ] );
					}
						else
					{
						exist = false;
					}
			}
		}
		
		this.Objects = news;
	}
	
	// Suppretion d'objet(s)
	function EraseObjects()
	{
		arg = this.EraseObjects.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucun Objet n'a été spécifier" );
				return;
			}
			
		if( arg.length == 1 && ( arg[ 0 ] == "all" || arg[ 0 ] == "*" ) )
		{
			this.Objects = new Array();
		}
			else
		{
			for( index = 0; index < arg.length; index++ )
			{
				if( !empty( trim( arg[ index ] ) ) )
				{
					for( index0 = 0; index0 < this.Objects.length; index0++ )
					{
						if( this.Objects[ index0 ] == arg[ index ] )
						{
							this.Objects[ index0 ] = "";
						}
					}
				}
			}
				this.SortObjects();
		}
	}

	// Lance & Vérifie la continuité du préchargement
	function Check()
	{
		if( this.Objects.length < 1 )
		{
			alert( "Aucun Objet n'a été spécifier pour le préchargement" );
			return;
		}
	
		this.SortObjects(); // un peu lourd de le faire a chaque fois mais bon on n'est bien  obliger

			if( this.Objects.length > this.ImagesL.length )
			{
				for( index = 0; index < this.Objects.length; index++ )
				{
					this.ImagesL[ index ] = new Array();
					
						this.ImagesL[ index ][ 'load' ] = false;

						this.ImagesL[ index ][ 'objt' ] = makeImage( this.Objects[ index ] );
						
						if( is_null( this.ImagesL[ index ][ 'objt' ] ) )
						{
							alert( "Votre navigateur ne supporte pas les images.\nLe préchargement ne peux avoir lieu...!" );
							break;
						}
				}
			
				this.doneobj = 0; // réinitialise le compteur
			}
				else
			{
				for( index = 0; index < this.ImagesL.length; index++ )
				{
					if( this.ImagesL[ index ][ 'objt' ].complete && !this.ImagesL[ index ][ 'load' ] )
					{
						this.ImagesL[ index ][ 'load' ] = true;
						this.doneobj++;
					}
				}
			}
	
				if( this.doneobj < this.Objects.length )
				{
					ClassName = this;
					setTimeout( "ClassName.CheckPreload();" , this.SetTime );
				}
			
		this.prcentage = parseInt( ( this.doneobj / this.Objects.length ) * 100 );
		this.ProgressBar();
	}
	
	// Changer des options
	function MoveSettings()
	{
		arg = this.MoveSettings.arguments;
		
			if( arg.length < 1 || ( arg.length == 1 && typeof( arg[ 0 ] ) != "object" ) || ( typeof( arg[ 0 ] ) != "object" && arg.length < 2 ) )
			{
				alert( "Wrong setting\nSetting not will be changed !" );
				return;
			}
			
			if( arg.length == 1 )
			{
				this.style = arg[ 0 ];
				return;
			}
			
				switch( arg[ 0 ] )
				{
					case 'doneobj' :
									this.doneobj = ( ( typeof( arg[ 0 ] ) == "number" ) ? arg[ 0 ] : 0 );
									break;
					
					case 'style_border' :
											this.style[ 'border' ] = arg[ 0 ];
											break;
					
					case 'style_Unload' :
											this.style[ 'Unload' ] = arg[ 0 ];
											break;
					
					case 'style_Onload' :
											this.style[ 'Onload' ] = arg[ 0 ];
											break;
					
					case 'style_colorZ' :
											this.style[ 'colorZ' ] = arg[ 0 ];
											break;
					
					case 'style_colorT' :
											this.style[ 'colorT' ] = arg[ 0 ];
											break;
					
					default :
								alert( "Parametre inéxistant !" );
								break;
				}
	}
	
	// Affiche la barre de progression
	function ProgressBar()
	{
		if( this.prcentage == 100 && this.doneobj < this.Objects.length )
		{
			this.prcentage = 99 ;
		}
			else
		
		if( this.prcentage == 100 )
		{
			ClassName = this;
			setTimeout( "ClassName.DonePreload();" , this.afterDone );
		}
		
		this.nbLoop++;
		this.div.innerHTML = this.ProgressBarLib();
	} 
	
	// Retourne l'objet spécifier en argument
	function ReturnObject()
	{
		this.SortObjects();
		
		arg = this.ReturnObject.arguments;
		
			if( arg.length < 1 )
			{
				alert( "Aucun Element spécifier !" );
				return;
			}
		
		obj = null;
		
			if( typeof( arg[ 0 ] ) == "number" && arg[ 0 ] < this.ImagesL.length )
			{
				return this.ImagesL[ arg[ 0 ] ][ 'objt' ];
			}
		
			for( index = 0; index < this.ImagesL.length; index++ )
			{
				if( typeof( this.ImagesL[ index ][ 'objt' ].src ) == "string" && trim( this.ImagesL[ index ][ 'objt' ].src ) == trim( arg[ 0 ] ) )
				{
					obj = this.ImagesL[ index ][ 'objt' ];
					break;
				}
			}
		
		return obj;
	}
	
	// Librairie des barres de progressions
	function ProgressBarLib()
	{
		switch( this.BarId )
		{
			case 1 :
						ProgressBarLoad = '<table border="0" style="font-family:' + this.style[ 'police' ] + ';">' +
										  ' <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td style="text-align:center;"><font style="color:' + this.style[ 'colorZ' ] + '"> Prechargement : <b>' + this.prcentage + '</b>%</font><br><font style="color:' + this.style[ 'colorT' ] + '">( ' + this.doneobj + ' / ' + this.ImagesL.length + ' ) image(s)</font></td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>' +
										  ' 			<div style="background-color:' + this.style[ 'Unload' ] + ';width:' + this.style[ 'width' ] + 'px;height:' + this.style[ 'height' ] * 100 + 'px;border:' + this.style[ 'border' ] + ';">' +
										  ' 				<div style="background-color:' + this.style[ 'Onload' ] + ';width:' + this.style[ 'width' ] + 'px;height:' + this.prcentage * this.style[ 'height' ] + 'px;">' +
										  ' 				</div>' +
										  ' 		    </div>' +
										  ' 	   </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '</table>' ;
						break;
			
			case 2 :
						ProgressBarLoad = '<table border="0" style="font-family:' + this.style[ 'police' ] + ';">' +
										  ' <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td style="text-align:center;"><font style="color:' + this.style[ 'colorZ' ] + '"> Prechargement : <b>' + this.prcentage + '</b>%</font><br><font style="color:' + this.style[ 'colorT' ] + '">( ' + this.doneobj + ' / ' + this.ImagesL.length + ' ) image(s)</font></td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>' +
										  ' 			<div style="text-align:right;background-color:' + this.style[ 'Unload' ] + ';width:' + this.style[ 'width' ] * 100 + 'px;height:' + this.style[ 'height' ] + 'px;border:' + this.style[ 'border' ] + ';">' +
										  ' 				<div style="background-color:' + this.style[ 'Onload' ] + ';width:' + this.prcentage * this.style[ 'width' ] + 'px;height:' + this.style[ 'height' ] + 'px;">' +
										  ' 				</div>' +
										  ' 		    </div>' +
										  ' 	   </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '</table>' ;
						break;
			
			case 3 :
						ProgressBarLoad = '<table border="0" style="font-family:' + this.style[ 'police' ] + ';">' +
										  ' <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td style="text-align:center;"><font style="color:' + this.style[ 'colorZ' ] + '"> Prechargement : <b>' + this.prcentage + '</b>%</font><br><font style="color:' + this.style[ 'colorT' ] + '">( ' + this.doneobj + ' / ' + this.ImagesL.length + ' ) image(s)</font></td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>' +
										  ' 			<div style="text-align:center;background-color:' + this.style[ 'Unload' ] + ';width:' + this.style[ 'width' ] * 100 + 'px;height:' + this.style[ 'height' ] + 'px;border:' + this.style[ 'border' ] + ';">' +
										  ' 				<div style="background-color:' + this.style[ 'Onload' ] + ';width:' + this.prcentage * this.style[ 'width' ] + 'px;height:' + this.style[ 'height' ] + 'px;">' +
										  ' 				</div>' +
										  ' 		    </div>' +
										  ' 	   </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '</table>' ;
						break;

						
			default : // 0 : default
						
						ProgressBarLoad = '<table border="0" style="font-family:' + this.style[ 'police' ] + ';">' +
										  ' <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td style="text-align:center;"><font style="color:' + this.style[ 'colorZ' ] + '"> Prechargement : <b>' + this.prcentage + '</b>%</font><br><font style="color:' + this.style[ 'colorT' ] + '">( ' + this.doneobj + ' / ' + this.ImagesL.length + ' ) image(s)</font></td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>' +
										  ' 			<div style="background-color:' + this.style[ 'Unload' ] + ';width:' + this.style[ 'width' ] * 100 + 'px;height:' + this.style[ 'height' ] + 'px;border:' + this.style[ 'border' ] + ';">' +
										  ' 				<div style="background-color:' + this.style[ 'Onload' ] + ';width:' + this.prcentage * this.style[ 'width' ] + 'px;height:' + this.style[ 'height' ] + 'px;">' +
										  ' 				</div>' +
										  ' 		    </div>' +
										  ' 	   </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '    <tr>' +
										  '        <td>  </td>' +
										  '        <td>  </td>' +
										  ' 	   <td>  </td>' +
										  '    </tr>' +
										  '</table>' ;
				  
						break;
		}
			return ProgressBarLoad;
	}
	
	// "Classe" de prechargement
	function Preload()
	{
		if( !document.images )
		{
				alert( "Le prechargement des images n'est pas suporter par votre navigateur." );
				return;
		}
		
		arg = Preload.arguments;
		
			if( arg.length < 2 )
			{
				alert( "Parametres manquants\nPrechargement non initialiser !" );
				return;
			}

		this.Objects   = new Array(); // Liste des objets a charger
		this.ImagesL   = new Array(); // Element(s)
		this.doneobj   = 0          ; // Nombre d'Element(s) charger
		this.nbLoop    = 0          ; // Nombre de tour fait pour le préchargement
		this.BarId     = arg[ 1 ]   ; // Le type de bar de progression choisie
		this.SetTime   = 500        ; // Vérification du prechargement toutes les (x) ms
		this.afterDone = 500        ; // Lance la fonction d'apres precharment (x) ms aprés la fin de la préchargement
		
			this.div = getElement( trim( arg[ 0 ] ) ) ; // la zone pour l'affichage de la barre de progression

				if( is_null( this.div ) )
				{
					alert( "La zone de la barre de progression n'éxiste pas....!\nPrechargement non initialiser !" );
					return;
				}
				
				if( typeof( this.BarId ) != "number" )
				{
					this.BarId = 0; // Barre de progression par defaut
				}
			
			this.style = new Array(); // Style de la barre de progression
			
				this.style[ 'border' ] = "1 #FF0000 solid";
				this.style[ 'Unload' ] = "#003366";
				this.style[ 'Onload' ] = "#0066CC";
				this.style[ 'colorZ' ] = "#FF0000";
				this.style[ 'colorT' ] = "#990000";
				this.style[ 'police' ] = "monospace";
				
				this.style[ 'height' ] = 2;
				this.style[ 'width'  ] = 2.5;

		this.AddObject      = AddObject     ; // Ajout d'objet(s)
		this.SortObjects    = SortObjects   ; // trie d'objet(s)
		this.EraseObjects   = EraseObjects  ; // Suppretion d'objet(s)
		this.CheckPreload   = Check         ; // Lance & Vérifie la continuité du préchargement
		this.ProgressBar    = ProgressBar   ; // Affiche la barre de progression
		this.MoveSettings   = MoveSettings  ; // Changer des options
		this.ReturnObject   = ReturnObject  ; // Renvoya l'objet spécifier
		this.ProgressBarLib = ProgressBarLib; // Librairie des barres de progression
		this.DonePreload    = DonePreload   ; // Fonction d'apres prechargement, a coder soit meme, inclut dans la classe pour pouvoir accédé aux variables de la classe si désiré
	}
	
//-->

Conclusion :


La fonction Move_Setting de la classe,
n'est pas encore completement opérationnel
donc a ne pas utiliser de préférence.
En cours de modification de la fonction.....

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
4
Date d'inscription
dimanche 31 octobre 2010
Statut
Membre
Dernière intervention
16 avril 2011

Bonjour,

Merci pour ce très bon script!
Par contre, on n'obtient pas le même aspect entre FF et les autre navigateurs. L'aspect avec FF est du reste le mieux.
:-)
Messages postés
1
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
28 novembre 2009

Bonjour,
Ton script est vraiment génial, personnalisable (via CSS, super simple merci pour ça!) Mais parcontre, j'aimerais bien savoir ou est cette fameuse fonction php qui liste les images du dossier img, parseque, dans mon cas, j'aimerais justement que ça ne le fasse pas, que sa charge UNIQUEMENT les images que j'ai choisi de charger...

J'aurais aussi une autre petite question, sur la première page ou je vais utiliser ton script, pour la reirection automatique, je suis OK, mais sur d'autres page je vais aussi l'utiliser, seulement je ne voudrait plus de cette redirection, si tu peut m'indiquer ou je peut zapper ça, sa serais cool.

Merci en tout cas pour ce partage :)
Messages postés
459
Date d'inscription
dimanche 9 janvier 2005
Statut
Membre
Dernière intervention
11 mai 2013

3,14 mo ^^"

Non, finalement je vais supprimer toutes les images,
et je vais les remplacés par des liens externe plutot,
mais si vous souhaitez placer des nouvelles images,
vous n'avez qu'a les ajoutés dans le dossier 'img' .

J'ai ajouter une petite fonction php qui liste les images du dossier,
et qui les ajoutes automatiquement au préchargement.....
Messages postés
5487
Date d'inscription
dimanche 4 août 2002
Statut
Modérateur
Dernière intervention
20 juin 2013
49
ça doit être limité aux alentours de 500Ko (voire même plus).
Ca devrait suffir non?

Allèges un peu tes images comme proposé par Arto si nécessaire...
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
Taille trop grande ? Peut-être sans les images ou avec des images plus légères.
Afficher les 7 commentaires

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.