PRECHARGEMENT D'IMAGE(S), AVEC BARRE DE PROGRESSION ( DIFFÉRENTE VERSION ) [ 0% (X)HTML , 100% JS ]

<!--

	// 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é
	}
	
//-->