BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )

Information sur la source

Catégorie :Effets Classé sous : prechargement, images, chargement, loading, pourcentage Niveau : Initié Date de création : 16/04/2006 Date de mise à jour : 21/01/2007 10:56:57 Vu : 10 297

Auteur : wizard512

Site perso

Ecrire un message privé

Note :

9,22 / 10

Commentaire sur cette source (25)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Voila un code qui permet d'observer le pourcentage du chargement des images d'un document.
En temps réel [ nombres d'images charger sur nombres d'images du document avec pourcentage ]
Ce script n'a pas besoin de configuration complexe ni de spécifier les images a charger
puisqu'il liste toutes les images du document ( d'oû l'importance de le metre a la fin de la page HTML )

Les Configuration ( simple ) a faire sont tous simplement :

   - Pour le temps en seconde aprés lequel la bar de chargement disparait quand le chargement est finie :
       Changer la valeur de la variable 'time' ( en seconde ) pour indiquer le temps souhaiter

   - Pour la couleur de la bar de chargement :
       Changer la valeur de la variable 'color' en indiquant le code de la couleur souhaiter
      ( ou meme le nom de la couleur en anglais bien sur ;] )

   - Pour la couleur de font de la bar de chargement ( les images du document pas encore charger ) :
       Changer la valeur de la variable 'bgcolor' ( pour le reste c'est exactement comme pour la variable 'color' )

   - Pour la police de caractère :
       Changer la valeur de la variable 'font' en indiquant le nom de la police de caractère souhaiter

   - Pour le temps maximum aprés lequel la bar de chargement disparait ( pour les lien mort d'image ) :
       Changer la caleur de la variable 'maxtime' en indiquant comme pour la variable 'time' le temps souhaiter
       en seconde aprés lequel la bar de chargement disparait

Source

var time = 1.5; // temps en seconde aprés lequel la bar de chargement disparait une finie
var color = "#006699"; // couleur de la bar de chargement
var bgcolor = "#000033"; // fond de la bar de chargement ( ce qui n'est pas encore charger )
var font = "monospace"; // Police du text du chargement
var maxtime = 60; // temps maximum aprés lequel la bar de chargement disparait
/* PAs touche */
var done = 0;
time = time * 1000;
maxtime = maxtime * 1000;
loaded = new Array();
function getElement( element )
{
if ( document.getElementById )
{
return document.getElementById( element );
}
else
{
if ( document.layers )
{
return document.element;
}
else
{
return document.all.element;
}
}
}
function Pre_load()
{
for( index = 0; index < document.images.length; index++ )
{
loaded[ index ] = false;
}
done = 0;
}
document.writeln( '<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>' );
window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", maxtime );
function Preload_Img()
{
imgs = document.images;
for( index = 0; index < imgs.length; index++ )
{
if( done >= imgs.length )
{
break;
}
else if( imgs[ index ].complete && loaded[ index ] == false )
{
done++;
loaded[ index ] = true;
}
}
if( done >= imgs.length )
{
window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", time );
}
else
{
window.setTimeout( "Preload_Img()", '50' );
}
PRC = Math.round( ( ( done / imgs.length ) * 100 ) );
preview = '<table border="0" style="font-family:' + font + ';">'+
' <tr>'+
' <td> </td>'+
' <td> </td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td>'+
' <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
' <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
' </span>'+
' </span>'+
' </td>'+
' <td> </td>'+
' </tr>'+
' <tr>'+
' <td> </td>'+
' <td> </td>'+
' <td> </td>'+
' </tr>'+
'</table>';
getElement( 'Loading_Img' ).innerHTML = preview;
}
Pre_load();
Preload_Img();

	var time = 1.5;           // temps en seconde aprés lequel la bar de chargement disparait une finie
	var color = "#006699";    // couleur de la bar de chargement
	var bgcolor = "#000033";  // fond de la bar de chargement ( ce qui n'est pas encore charger )
	var font = "monospace";   // Police du text du chargement
	var maxtime = 60;         // temps maximum aprés lequel la bar de chargement disparait

		/* PAs touche */
		var done = 0;
		time = time * 1000;
		maxtime = maxtime * 1000;
		loaded = new Array();

	function getElement( element )
	{
		if ( document.getElementById ) 
		{ 
			return document.getElementById( element );
		} 
			else 
		{ 
			if ( document.layers ) 
			{ 
				return document.element;
			} 
				else 
			{ 
				return document.all.element;
			} 
		} 
	}

		function Pre_load()
		{
			for( index = 0; index < document.images.length; index++ )
			{
				loaded[ index ] = false;
			}
                                done = 0;
		}

	document.writeln( '<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>' );
	window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", maxtime );
		
	function Preload_Img()
	{
		imgs = document.images;

			for( index = 0; index < imgs.length; index++ )
			{	
				if( done >= imgs.length )
				{
					break;
				}
					else if( imgs[ index ].complete && loaded[ index ] == false )
				{
					done++;
					loaded[ index ] = true;
				}
			}
			
			if( done >= imgs.length )
			{
				window.setTimeout( "getElement( 'Loading_Img' ).style.visibility='hidden';", time );
			}
				else
			{
				window.setTimeout( "Preload_Img()", '50' );
			}

		PRC = Math.round( ( ( done / imgs.length ) * 100 ) );
			
		preview = '<table border="0" style="font-family:' + font + ';">'+
	  			  ' <tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>  </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '	<tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '	<tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>'+
				  '          <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
				  '                <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
				  '                </span>'+
				  '         </span>'+
				  '     </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
	  			  ' <tr>'+
	      	 	  '		<td>  </td>'+
	      	      '		<td>  </td>'+
	      	      '     <td>  </td>'+
	  			  '	</tr>'+
				  '</table>';

		getElement( 'Loading_Img' ).innerHTML = preview;
	}
	
	Pre_load();
	Preload_Img();

Conclusion

Pour un petit exemple ajouter l'encadrer si dessous ( 85 images prises aux hasard ) avant le script :
[ la taille est uniquement limiter pour éviter d'avoir un gros basard ]
( Il se peux qu'avec le temps, certain lien soit mort )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<img width=50 src="http://www.generationmp3.com/images/tests/irivert10/IMG_1356.jpg">
<img width=50 src="http://www.generationmp3.com/images/tests/H10/DSCN3947.jpg">
<img width=50 src="http://sbalai.free.fr/hosted/ism/taille%20par%20rapport%20billets.jpg">
<img width=50 src="http://www.avtec.com/var/avtec/storage/images/products/simulation_test_systems/ops_rf_geolocation_test/4187-20-eng-US/ops_rf_geolocation_test.jpg">
<img width=50 src="http://www.sandia.gov/news-center/news-releases/2005/images/solar-test.jpg">
<img width=50 src="http://www.phil.uu.nl/~xges/images/daikon.jpg">
<img width=50 src="http://www.blaha.net/images/Test%202%20600dpi%206x6.jpg">
<img width=50 src="http://weblog.redisdead.net/images/test-brownie.jpg">
<img width=50 src="http://semopyworld.free.fr/montages/Test%20Presence%20ELECTRIQUE.jpg">
<img width=50 src="http://spider.ipac.caltech.edu/staff/jarrett/2mass/3chan/cool/abell_3627small_1.5X1.5.jpg">
<img width=50 src="http://www.naminjazz.be/images/1803.png">
<img width=50 src="http://www.google.fr/intl/fr_fr/images/logo.gif">
<img width=50 src="http://images.google.fr/images?q=tbn:iQoZVmWGad6fBM:www.etw.de/windtunnel/ts/model.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:na6XJEajb08gZM:photo1.dukenews.duke.edu/pages/div.test/div.test.4.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:mf_u-VI49ITSuM:www.oxford.anglican.org/youthblog/archives/test%2520card%25202.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:KJ6-41ICvmd5GM:map05.gsfc.nasa.gov/data/MODIS/tc/test-data/A2005099123000.L1B_LAC.6S_28S_58E_85E-4km.jpg">
<img width=50 src="http://images.google.fr/images?q=tbn:sfEasz-sM9SkOM:sprott.physics.wisc.edu/fractals/collect/1995/TEST.JPG">
<img width=50 src="http://eur.a1.yimg.com/eur.yimg.com/a/eu/any/couplewine1.jpg">
<img width=50 src="http://eur.i1.yimg.com/eur.yimg.com/i/fr/se/b/charm.jpg">
<img width=50 src="http://eur.i1.yimg.com/eur.yimg.com/i/fr/mu/z/place.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/420365913.gif">
<img width=50 src="http://polybomb.skyblog.com/pics/422162407_small.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/420363831_small.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/353465581.jpg">
<img width=50 src="http://polybomb.skyblog.com/pics/414802033_small.jpg">
<img width=50 src="http://www.prechargement.com/images/big-memory.jpg">
<img width=50 src="http://elmaerror.free.fr/LMA800.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/VeNgE.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/bunk.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/berKe.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/MAn.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/Lost.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/Mkehands.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/MicropointDark.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/need_you.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/maths.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/msfn.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/Untitled-1.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/zombie.png">
<img width=50 src="http://www.u-blog.net/resetparam/img/MKe_Seppuku.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/InnocentK.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/mHdK.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/EaTV.png">
<img width=50 src="http://www.u-blog.net/resetparam/img/bonoms.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/mouthsound.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/lorem.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/chepernoel.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/flying.gif">
<img width=50 src="http://www.u-blog.net/resetparam/img/HC.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/zombitek.jpg">
<img width=50 src="http://www.u-blog.net/resetparam/img/indatown.jpg">
<img width=50 src="http://piem2.free.fr/zbruraccords.gif">
<img width=50 src="http://img7.exs.cx/img7/6595/scared3.gif">
<img width=50 src="http://elmaerror.free.fr/LMA800.gif">
<img width=50 src="http://solarphp.com/svn/img/src/solar_logo_flat.png">
<img width=50 src="http://wingolog.org/wp-content/ale_-_mu_eka_danza_full.jpg">
<img width=50 src="http://www.midori.com/okbys/hana/gekka02.gif">
<img width=50 src="http://www.midori.com/okbys/hana/gekka01.gif">
<img width=50 src="http://www.mmaa.org/sites/4d7874e8-0b8f-4445-9da2-d00c8bec7902/uploads/Bruce_Cheech.jpg">
<img width=50 src="http://kepler.mech.tohoku.ac.jp/activity/book1.jpg">
<img width=50 src="http://www.therightwaymoving.com/images/banner1.gif">
<img width=50 src="http://www.evolnet.ch/evolution/uploads/hubble1.jpg">
<img width=50 src="http://www.cv.nrao.edu/~pmurphy/Talks/imagesweb/ireland_20050205.jpg">
<img width=50 src="http://foto.radikal.ru/0601/1064f17528ba.jpg">
<img width=50 src="http://i3.photobucket.com/albums/y67/missdrella/jdcorn.jpg">
<img width=50 src="http://www.mattjonesblog.com/img/dancuban.jpg">
<img width=50 src="http://i12.photobucket.com/albums/a225/nikkitalkalot/walmart22.jpg">
<img width=50 src="http://straydog.way-nifty.com/yamaokashunsuke/images/50_3.jpg">
<img width=50 src="http://1984.serpent.pl/varia/fanzin1.jpg">
<img width=50 src="http://www.gtabloggers.com/jimmunroe.jpg">
<img width=50 src="http://80.237.203.119/Commandernachrichten2.jpg">
<img width=50 src="http://tinypic.com/iqzuv4.gif">
<img width=50 src="http://www.uni-koeln.de/organe/presse/pisystem/mehr/dep.jpg">
<img width=50 src="http://www.mediaeater.com/pictures/2002/July_2002/misc/art/sorry.gif">
<img width=50 src="http://www.skinbase.org/files/zoom/1-A_Month_of_Sundays.jpg">
<img width=50 src="http://www.opticalcloseouts.com/images/frames/large_ainvestment%2016a.jpg">
<img width=50 src="http://i6.photobucket.com/albums/y244/takingbackjuice/juice/tiaspics013.jpg">
<img width=50 src="http://i33.photobucket.com/albums/d81/Msiti/CIMG0306.jpg">
<img width=50 src="http://www.dcresource.com/reviews/kyocera/finecam_s3-review/KIF_0031.JPG">
<img width=50 src="http://www.andriaroberto.com/Pianta%20del%20Burg.jpg">
<img width=50 src="http://img369.imageshack.us/img369/3852/ownedyourebirthandbatch2ea.jpg">
<img width=50 src="http://herakles.zcu.cz/informal/others/2004-eci/src%5Cimg_0206.jpg">
<img width=50 src="http://4travel.jp/img/tcs/t/album/src_10028644.jpg">
<img width=50 src="http://4travel.jp/img/tcs/calendar/src_10000578.jpg">
<img width=50 src="http://aki-maeda-radio.site.voila.fr/ban.bmp">

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Puis tester ;)

#############################################################################################

Regarder la capture du script ( un peut plus haut ) et vous pouvez observer qu'en bas de
la page du navigateur il est indiquer par le navigateur qu'il reste 22 images a charger
exactement comme l'indique la bar et l'enoncer de chargement sauf qu'il y en a un de moin
( le navigateur = 22 images restantes alors que l'enoncer 23 images restantes ( 85 - 62 = 23 ) )
car le lien d'une des images du document est volontairement corrompu ( lien mort ) afin de
vous montrer qu'a la fin du chargement des images l'enoncer nous affichera '99%' pour ce document.
Car telle est l'etat de la page Donc l'etat du chargement
est donc bien reel...... ;)

#############################################################################################

Historique

16 janvier 2007 23:13:13 :: Mise a jour de la fonction Pre_load ;) Vive Ajax.....
21 janvier 2007 10:56:57 :: Rajout d'une fonction "getElement( 'id' );" qui je l'espert règlera les problèmes de compatibilité entre navigateur, IE, FireFox, Opera, ..... A vous de me l'indiquer ;)

Sources du même auteur

Toutes les sources de wizard512

Sources de la même categorie

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

Commentaires

Commentaire de wizard512 le 16/04/2006 23:05:43

J'espère que cette source servira a des personnes qui en on bien besoin

;)
Commentaire de Phil_Free le 17/04/2006 15:30:59

Salut,

Pour le titre tu devrais plutôt indiquer:

Barre d'avancement du chargement des images...
Commentaire de johann1 le 17/04/2006 16:39:19

Bonjour Wizard,

Je n'ai pas de résultat, y a t'il quelque chose qui m'a échappé!?
Je ne vois pas! Veux-tu jeter un coup d'oeil: Voici une page où j'utilise un loading que je n'aime pas trop
http://business-internet.voicemessenger.biz/
Voici où se trouve le tien: http://business-internet.voicemessenger.biz/FR/Toutes-les-selles-mexicaines.htm

Merci à toi... (Et je suis déjà persuadé du succès de ta source)
Commentaire de wizard512 le 17/04/2006 19:49:47

Je crois que j'ai trouver ( aprés avoir enregistrer la page et l'avoir ouvert )
Enlève la ligne 22 de ma source ( voir plus haut ) c'est la div ou va s'afficher le chargement.
Puis place la juste aprés la balise body de ta page ( ligne 8 du script de ton document )
Puis normalement sa devrai aller ( normalement .... )
bref si sa marche pas reviens me le signaler ( en espérant que sa marche :] )

voila ... ;)
Commentaire de johann1 le 17/04/2006 20:59:44

Super génial Wizard! Merci!!! Ca marche du tonnerre! J'ai suivi ton conseil, et le résultat est là!:
http://business-internet.voicemessenger.biz/

Bref, ca donne ceci:
juste après le <body>-->

<div id="Loading_Img" style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;"></div>

Juste avant </body> --->

<script> // JavaScript Document
var time = 1.5; // temps en seconde apres lequel la bar de chargement disparait une finie
    var color = "#006699"; // couleur de la bar de chargement
    var bgcolor = "#000033"; // fond de la bar de chargement ( ce qui n'est pas encore charger )
    var font = "monospace"; // Police du text du chargement
    var maxtime = 60; // temps maximum apres lequel la bar de chargement disparait

        /* PAs touche */
        var done = 0;
        time = time * 1000;
        maxtime = maxtime * 1000;
        loaded = new Array();

        function Pre_load()
        {
            for( index = 0; index < document.images.length; index++ )
            {
                loaded[ index ] = false;
            }
        }


    window.setTimeout( "document.all.Loading_Img.style.visibility='hidden';", maxtime );

    function Preload_Img()
    {
        imgs = document.images;

            for( index = 0; index < imgs.length; index++ )
            {
                if( done >= imgs.length )
                {
                    break;
                }
                    else if( imgs[ index ].complete && loaded[ index ] == false )
                {
                    done++;
                    loaded[ index ] = true;
                }
            }

            if( done >= imgs.length )
            {
                window.setTimeout( "document.all.Loading_Img.style.visibility='hidden';", time );
            }
                else
            {
                window.setTimeout( "Preload_Img()", '50' );
            }

        PRC = Math.round( ( ( done / imgs.length ) * 100 ) );

        preview = '<table border="0" style="font-family:' + font + ';">'+
                  ' <tr>'+
               '        <td>  </td>'+
          '        <td>  </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>  </td>'+
          '        <td style="color:red;text-align:center;"> Chargement : ' + PRC + '%<br>( ' + done + ' / ' + imgs.length + ' ) image(s)</td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '    <tr>'+
               '        <td>  </td>'+
          '        <td>'+
                 ' <span style="background-color:' + bgcolor + ';width:200px;border:1 red solid;">'+
                 ' <span style="background-color:' + color + ';width:' + PRC * 2 + 'px;">'+
                 ' </span>'+
                 ' </span>'+
                 ' </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                  ' <tr>'+
               '        <td>  </td>'+
          '        <td>  </td>'+
          ' <td>  </td>'+
                  '    </tr>'+
                 '</table>';

        document.all.Loading_Img.innerHTML = preview;
    }

    Pre_load();
    Preload_Img();

</script>

ENCORE MERCI!
Commentaire de wizard512 le 17/04/2006 21:01:57

De rien c'est moi qui te remercie d'avoir utiliser ma source !!!

@_@ Et bon prog ;)
Commentaire de whoetbe le 18/04/2006 13:29:56

Ca fonctionne bien, sauf lorsque des images sont introuvable et ne sont pas chargées.
Commentaire de wizard512 le 18/04/2006 18:20:13

Oui quand des images ont effectivement des lien morts
la bars de pourcentage ne s'efface qu'aprés le temps
indiquer dans la variable 'maxtime'
( c'est pour sa qu'il faut qu'il ne soit pas trop grand )
Environ : 15 Secondes

Voila
Commentaire de whoetbe le 19/04/2006 09:15:52

Merci wizard. Bien contourné ;-) !
Commentaire de mickaelpfr le 19/04/2006 10:23:09

yop belle source , pas regardé le code mais cette source pourrais m'être utile :)
Commentaire de DS JENOVA le 16/06/2006 13:27:49

vraiment super code, voila deja un bout de temps que j'en cherchai un comme sa
MERCI
Commentaire de wizard512 le 16/01/2007 23:10:25

Juste une petite remarque j'ai configuré le code,
fonction ( Pre_load() ),
parseque suite une petite réflexion,
il aura besoin de cette petite configuration :

        function Pre_load()
        {
            for( index = 0; index < document.images.length; index++ )
            {
                loaded[ index ] = false;
            }
done = 0;
        }

car il faut aussi réiniatialisé done a 0,
car supposont par exemple
qu'une partie de la page change constament,
par exemple une navigation en Ajax ( simplifier en une seul fonction [ voir mes sources ] ),
et une modification grace a innerHTML,
se qui est mon cas en ce moment même où je vous parle,
en utilisant cette 'technike" je crée un site,
mais supposont que la page (Y) fait appelle a la page (X) grace a Ajax [ qui contient 4 images ],
et que l'on utilise ce script de pourcentage,
tous marche pour l'instant,
mais ensuite supposont que (Y) fait appelle a (Z),
toujours grace a Ajax, et que la page (Z) contient elle 2images,
même en ré-initialisant grace a Pre_load(), vous obtiendrez [ 4/2 chargé, 200% ]
car done = 4; ( si elle a finit de tous charger )

Bref le résultat sera forcément érroné, donc en gros, moi je vais arrété de parler,
et pi voila, faite juste la mise à jour si vous utilisé Ajax sinon je crois pas que sa changera quelque chose.....

Bonne soiré & Bon CodE..................                     ;)
Commentaire de wizard512 le 21/01/2007 10:59:31

Rajout d'une fonction pour une meilleur compatibilité entre navigateur,
il est vivement conseillé de metre à jours cette source si vous l'avez placer sur votre site.

Normalement avec cette mise a jours on ne devrait pas avoir de souci,
entre FireFox, IE, Opéra, Etc.....
Commentaire de 1bhrunoh le 09/03/2007 20:59:57

Vraiment bravo. Je n'ai pu m'enpecher de réagir... le code est simple à appréhender et facillement adaptable. Perso, si j'arrive à le rendre compatible pour la plus part des navigateur je te fais signe Wizzard ou si tu y arive avant, priere de nous faire signe. Merci encore et bonne chance à toi.
Commentaire de stfou le 06/04/2007 21:08:32

Euh... et si il n'y a pas d'images ?
Commentaire de wizard512 le 07/04/2007 16:00:19

Ok, merci 1bhrunoh de tes efforts ^^
STFOU => S'il n'y a aucune image pourquoi mettre se code....?
Commentaire de stfou le 07/04/2007 16:33:25

Oui, j'avais mal lu le titre : BAR DE STATUS POUR LE CHARGEMENT DES PAGEs, comme quoi, il faut toujours tourner 7 fois sa souris autour du bouton accepter avant de cliquer :D (adaptation d'un proverbe connu).
Commentaire de stfou le 07/04/2007 16:35:05

Sinon super source pour par exemple un diaporama, une galerie photo etc...
10/10
Commentaire de wizard512 le 07/04/2007 19:34:45

lol, sa peux arriver, normale
merci pour ta note
Commentaire de stfou le 07/04/2007 20:38:19

Derien ;)
Commentaire de val3512 le 25/11/2007 15:58:09

ca ne sere pas a grand chose ... esperons que sa serve a d'autres .. le chargement d'image .
Commentaire de AzertiX le 19/01/2008 14:56:19

Bonjour, je viens de tester ce code, et cela semble fonctionner, mais je ne vois pas la barre de chargement.
Je vois seulement le texte :
Chargement : 88%
( 7 / 8 ) image(s)

Sinon, j'aimerais que ma page ne s'affiche que lorsque TOUTES les images ont été chargées et qu'on ne voie que la barre de chargement pendant ce temps. Est-ce possible ?
Je sais qu'il existe une propriété "complete" qui indique si le navigateur a terminé le chargement de l'image.

Merci d'avance pour vos réponses.
Commentaire de AzertiX le 19/01/2008 16:50:07

Autre truc, je viens de mettre le script sur mon site, ici :
http://philippedomergue.free.fr/index2.html
Sur le menu (à gauche) et sur la page ¼uvres.

Plusieurs "soucis" :
- Depuis que j'ai mis le script, j'ai une barre de défilement horizontale qui est apparue en bas de mon menu.
- La barre s'affiche même lorsque les images sont déjà mises en cache (quand on actualise la même page).
- Pour mon menu, j'aimerais faire en sorte que les images se pré-chargent, mais que la barre de chargement ne s'affiche pas. Quelle partie(s) du code je dois enlever ?

Bon, voilà. Désolé de bombarder de questions comme ça, mais je pense que ça pourra aussi être utile à d'autres utilisateurs :)
Commentaire de AzertiX le 19/01/2008 17:27:33

Oh stupeur !
En fait ma barre de chargement est toute moche seulement avec Firefox (que j'utilise 99% du temps). J'ai testé avec IE et la barre est vraiment mieux.
En fait, j'ai vu d'où venait le souci d'affichage :
la syntaxe CSS est mauvaise, et comme Firefox respecte les normes (contrairement à IE qui s'en fout), il a pas aimé.
Il faut remplacer :
style="border:1 red solid;position:absolute;left:35%;top:35%;background-color:white;" ligne 41
Par :
style="border:1;border-color:red;border-style:solid;position:absolute;left:35%;top:35%;background-color:white;"
Et de même, remplacer la ligne 86 :
style="background-color:' + bgcolor + ';width:200px;border:1 red solid;"
Par :
style="background-color:' + bgcolor + ';width:200px;border:1;border-color:red;border-style:solid;"

Ceci résolut le problème des bordures, mais on ne voit toujours pas l'évolution du chargement de la barre.
Je vais essayer de trouver une solution ...
Commentaire de wizard512 le 23/02/2008 08:58:41

>> val3512 : Si sa sert a faire patientez le visiteur et à lui indiquer l'avancement total du chargement des images

Ajouter un commentaire

Discussions en rapport avec ce code source

Pourquoi mon pre-chargement d'images ne marche pas toujours ? par sunelis

controle de chargement de sons par theyann

Chargement d une image par adakick

Probleme d'arret de chargement lors d'un evenement javascript par super_mamie

fonction chargement pour gallerie Interne HTML par karaziel

prechargement d'image par mickadevelop

prechargement d image ?? par gabs77

Images mappé par darkwhite

Post-chargement par Gamslink

changement de src par paolinardc