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

---

Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

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

<!--

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

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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

08 mars 2007 21:22:54 :

Ajout d'un screen, et du nouveau zip.....

• UNE FONCTION QUI DORT ======> SLEEP( SECONDE );
• AJAXSIMPLIFIER EN UNE SEUL FONCTION ( GET && POST )
• UNE FONCTION POUR LA GESTION DU CLAVIER ET UNE AUTRE POUR L'INTERDICTION DE TAPER UNE TOUCHE NON NUMÉRIQUE [ NS, FF & IE ]
• BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )
• LISTER LES PLUG-INS INSTALLÉ DU BROWSER (IE SEULEMENT)

• DOM PARCOURIR LES RÉPERTOIRES ET FICHIERS EN LOCAL (EXCLUSIF : IE)
• DÉSACTIVER LE BOUTON BACK DU BROWSER
• [CF) CHOIX D'UN FICHIER
• OBJET JAVASCRIPT RENVOYANT DES INFO SUR UTILISATEUR CONNECTÉ
• [GAG] GESTION AJAX GÉNÉRALISÉE

• DOM PARCOURIR LES RÉPERTOIRES ET FICHIERS EN LOCAL (EXCLUSIF : IE)
• CLASSE AJAX : PROTOTYPE ROCKS !
• DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEUR SELON LA PROGRESSION
• BARRE DE CHARGEMENT
• BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )