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 795 fois - Téléchargée 1 358 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

jornov7
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.
:-)
Mouk32
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 :)
wizard512
Messages postés
470
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.....
cs_Bidou
Messages postés
5507
Date d'inscription
dimanche 4 août 2002
Statut
Modérateur
Dernière intervention
20 juin 2013
42 -
ç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...
Arto_8000
Messages postés
1051
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
5 -
Taille trop grande ? Peut-être sans les images ou avec des images plus légères.

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.