begin process at 2008 08 20 17:40:09
1 228 990 membres
350 nouveaux aujourd'hui
14 259 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

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


Information sur la source

Catégorie :Navigation Classé sous : prechargement, chargement, image, classe, progression Niveau : Initié Date de création : 07/03/2007 Date de mise à jour : 08/03/2007 21:22:54 Vu / téléchargé: 8 724 / 880

Note :
7,33 / 10 - par 3 personnes
7,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

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

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

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

	// 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.....
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.....
  • signaler à un administrateur
    Commentaire de Bidou le 08/03/2007 08:52:19 administrateur CS

    Bonjour,
    Pourquoi ne pas poster également un zip complet ici ?
    Ca pourrait servir à certain ^^

  • signaler à un administrateur
    Commentaire de wizard512 le 08/03/2007 15:25:17

    Aprés 23 tentative(s), avec IE et FF,
    j'ai pas réussit, même en alégeant au maximum la taille du zip,
    il me met toujours : taille tros grande !!!

    Bref j'ai abandonné....

    ......Si quelqu'un a une idée..?!

  • signaler à un administrateur
    Commentaire de Arto_8000 le 08/03/2007 17:22:33

    Taille trop grande ? Peut-être sans les images ou avec des images plus légères.

  • signaler à un administrateur
    Commentaire de Bidou le 08/03/2007 19:20:10 administrateur CS

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

  • signaler à un administrateur
    Commentaire de wizard512 le 08/03/2007 21:14:39

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

Ajouter un commentaire

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
campagne Adwords
Budget : 5 000€
Boite echanges securis...
Budget : 500€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

VS Express FR Gratuit !

VS Express en français et 100% gratuit !

Téléchargements

Boutique

Boutique de goodies CodeS-SourceS