[Javascript] Mini barres de chargement

Fermé
axel50397 Messages postés 113 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 17 mars 2014 - 4 janv. 2008 à 12:04
 Ghizlane - 27 mai 2010 à 16:05
Bonjour,

J'ai un site internet et je suis en train de travailler sur un système de miroirs...
Pendant le chargement de la page principale du site principal, plusieurs lien sont testés et il y a un retour de leur êtat sur la page...
Les liens sont agencés sous forme d'un tableau, une ligne par Site...

J'aimerais en fait, que pendant l'exécution du script, et meme à la fin de l'affichage de la page, il y ai une petite barre de chargement, toute simple avec ou sans porcentage qui indiquerait l'avancement du teste du site... Et j'aimerais faire cela pour les 3 liens à tester...

L'effet recherché est celui d'un "teste en cours" et à la fin du chargement, l'état du site serait affiché (juste derriere l'emplacement de la barre...)

J'espère que vous comprenez ce que je cherche, et que vous pouriez m'aider...

Merci beaucoup !
A voir également:

6 réponses

Cabbie Messages postés 17 Date d'inscription mercredi 28 novembre 2007 Statut Membre Dernière intervention 4 janvier 2008 11
4 janv. 2008 à 12:17
Bonjour,

Je n'suis pas sur d'avoit tolalement compris ce que tu désires faire, mais s'il s'agit d'une barre de chargement (s'affichant pendant l'éxecution du script et s'enlevant à la fin), voici ce que je peut te proposer (je m'excuse par avance de la longueur du message) :

! Afin de rendre à César ce qui est à César, ce script n'est pas de moi !

- Copyright 2004 Brian Gosselin of ScriptAsylum.com -

Etape 1 : creer un fichier Javascript contenant


// xp_progressbar
// Copyright 2004 Brian Gosselin of ScriptAsylum.com
//
// v1.0 - Initial release
// v1.1 - Added ability to pause the scrolling action (requires you to assign
// the bar to a unique arbitrary variable).
// - Added ability to specify an action to perform after a x amount of
// - bar scrolls. This requires two added arguments.
// v1.2 - Added ability to hide/show each bar (requires you to assign the bar
// to a unique arbitrary variable).

// var xyz = createBar(
// total_width,
// total_height,
// background_color,
// border_width,
// border_color,
// block_color,
// scroll_speed,
// block_count,
// scroll_count,
// action_to_perform_after_scrolled_n_times
// )

var w3c=(document.getElementById)?true:false;
var ie=(document.all)?true:false;
var N=-1;

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
for(i=0;i<blocks;i++){
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N);
bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N);
bA.blocks=blocks;
bA.N=N;
bA.w=w;
bA.h=h;
bA.speed=speed;
bA.ctr=0;
bA.count=count;
bA.action=action;
bA.togglePause=togglePause;
bA.showBar=function(){
this.bar.style.visibility="visible";
}
bA.hideBar=function(){
this.bar.style.visibility="hidden";
}
bA.tid=setInterval('startBar('+N+')',speed);
return bA;
}}

function startBar(bn){
var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn);
if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){
t.style.left=-(t.h*2+1)+'px';
t.ctr++;
if(t.ctr>=t.count){
eval(t.action);
t.ctr=0;
}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';
}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}


Etape 2 : créer un fichier php contenant


<?
// Fonction pour afficher la barre de progression
function Show_ProgressBar()
{
echo ("<div id=\"progress\" style=\"display:none;\">");
echo ("<h4>Please loading ...</h4>");
echo ("<img src=\"../Intranet/images/progress.gif\" border = \"0px\" title=\"Loading\">");
echo ("</div>");

echo "<script>";
echo "document.getElementById('progress').style.display=\"block\";";
echo "</script>";
}

// Fonction pour masquer la barre de progression
function Hide_ProgressBar()
{
echo "<script>";
echo "document.getElementById('progress').style.display=\"none\";";
echo "</script>";
}
?>


Etape 3 : Tu utilises les fonctions de cette façon :

// Début de la page php appellant ton script
<?

// Appel de la fonction d'affichage
Show_ProgressBar();
// Insertion de ton script
... script ...
// Appel de la fonction d'enlevement
Hide_ProgressBar();

// Fin de la page appellant ton script
?>


En espérant que ça corresponde à tes attentes
9
Bonjour je viens d'essayer ton script c exactement ce que je recherche mais il ne fonctionne pas chez moi !!! je dois surement mal m'y prendre !!!! tu n'as pas donné de nom au fichier, c peut être à cause de ca que ca ne fonctionne pas ? merci pour ta reponse
0
Bonjour SVP je cherche à ajouter une barre de progression qui affiche l'état d'upload d'un fichier via ftp , j'ai déjà configuré l'upload je veux juste ajouter la barre Aidez moi si possible MEerci
0
Utilisateur anonyme
2 juin 2009 à 17:12
Tu peux faire ca en ajax,cherche un peu sur google ;P
bonne chance
2
axel50397 Messages postés 113 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 17 mars 2014 16
4 janv. 2008 à 12:40
Hello,

Merci beaucoup, je recherche presque cela... Le problème, c'est que je dois afficher une barre de progréssion sur 3 céllules différentes d'un tableau:

exemple d'une cellule:

--------------------------------------------------------------------------------
Miroir 1 | Emplacement Web du miroir | Barre de chargement |
--------------------------------------------------------------------------------

La barre (meme si c'est une barre qui charge dans le vide, qui ne charge rien de concret, meme si j'ai juste une barre qui affiche 23%, puis 50%, puis 70, puis 100, il faut qu'à la fin, elle disparaisse, pour que le script derriere puisse afficher l'état du moroir distant...

Il y a au mimum 3 miroirs, je peux pas utiliser ton script, à moins de le copier 3 fois en changeant les noms... Mais ce serait un peu lourd...

J'espere que c'est plus clair, merci de ton aide !
1
Cabbie Messages postés 17 Date d'inscription mercredi 28 novembre 2007 Statut Membre Dernière intervention 4 janvier 2008 11
4 janv. 2008 à 14:21
Tant pis, un coup dans l'eau ^^

Au cas où, je te passe un lien pour créer une page de chargement :

http://www.valhalla.fr/index.php/2007/08/01/php-wait-screen/

Jai peur que ça ne corresponde pas exactement à tes attentes non plus, mais dans la mesure où la conception est différente de la précédente, peut être pourras tu trouver ici des pistes pour régler ton problème ;-)

Bon courage
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
axel50397 Messages postés 113 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 17 mars 2014 16
4 janv. 2008 à 15:56
Ah, merci quand même Cabbie...

Mais je pense que j'en aurais surement besoin si ce que je cherche n'est pas possible... ^^
Merci !


Sinon, d'autres idées ?
1
Bonjour SVP je cherche à ajouter une barre de progression qui affiche l'état d'upload d'un fichier via ftp , j'ai déjà configuré l'upload je veux juste ajouter la barre Aidez moi si possible Merci
0