BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE ( VRAI )
wizard512
Messages postés
459
Date d'inscription
dimanche 9 janvier 2005
Statut
Membre
Dernière intervention
11 mai 2013
-
16 avril 2006 à 23:05
jfs29 Messages postés 2 Date d'inscription vendredi 8 février 2013 Statut Membre Dernière intervention 1 mars 2013 - 1 mars 2013 à 17:59
jfs29 Messages postés 2 Date d'inscription vendredi 8 février 2013 Statut Membre Dernière intervention 1 mars 2013 - 1 mars 2013 à 17:59
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/37087-bar-de-status-pour-le-chargement-des-images-avec-pourcentage-vrai
https://codes-sources.commentcamarche.net/source/37087-bar-de-status-pour-le-chargement-des-images-avec-pourcentage-vrai
1 mars 2013 à 17:59
Pour le positionnement du cadre, laissez tomber. Après quelques tâtonnements, j'ai réussi à le placer où je voulais.
28 févr. 2013 à 17:24
J'ai passé l'après-midi à essayer des trucs. Rien n'y fait. Mais je ne suis pas un expert. Y-a-t-il une erreur dans le code ?
J'aurais aimé aussi pouvoir placer le cadre de préchargement au centre de l'écran. Toutes mes tentatives de changer la position
ont échoué, même en vidant le cache de mon navigateur. Pouvez-vous m'aider ?
23 févr. 2008 à 08:58
19 janv. 2008 à 17:27
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 ...
19 janv. 2008 à 16:50
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 :)
19 janv. 2008 à 14:56
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.
25 nov. 2007 à 15:58
7 avril 2007 à 20:38
7 avril 2007 à 19:34
merci pour ta note
7 avril 2007 à 16:35
10/10
7 avril 2007 à 16:33
7 avril 2007 à 16:00
STFOU => S'il n'y a aucune image pourquoi mettre se code....?
6 avril 2007 à 21:08
9 mars 2007 à 20:59
21 janv. 2007 à 10:59
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.....
16 janv. 2007 à 23:10
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.................. ;)
16 juin 2006 à 13:27
MERCI
19 avril 2006 à 10:23
19 avril 2006 à 09:15
18 avril 2006 à 18:20
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
18 avril 2006 à 13:29
17 avril 2006 à 21:01
@_@ Et bon prog ;)
17 avril 2006 à 20:59
http://business-internet.voicemessenger.biz/
Bref, ca donne ceci:
juste après le -->
Juste avant --->
<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 = ''+
' ----
'+
' , '+
' , '+
' , '+
' '+
' ----
'+
' , '+
' Chargement : ' + PRC + '%
( ' + done + ' / ' + imgs.length + ' ) image(s), '+
' , '+
' '+
' ----
'+
' , '+
' '+
' '+
' '+
' '+
' '+
', '+
' , '+
' '+
' ----
'+
' , '+
' , '+
' , '+
' '+
'
';
document.all.Loading_Img.innerHTML = preview;
}
Pre_load();
Preload_Img();
</script>
ENCORE MERCI!
17 avril 2006 à 19:49
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 ... ;)
17 avril 2006 à 16:39
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)
17 avril 2006 à 15:30
Pour le titre tu devrais plutôt indiquer:
Barre d'avancement du chargement des images...
16 avril 2006 à 23:05
;)