Rechercher : dans
Par :

[Javascript] Mini barres de chargement

Dernière réponse le 13 nov 2009 à 18:25:47 axel50397, le 4 jan 2008 à 12:04:05 
 Signaler ce message aux modérateurs

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 !

Configuration: Windows XP
Firefox 2.0.0.8

Meilleures réponses pour « [Javascript] Mini barres de chargement » dans :
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Web - Le navigateur VoirLe navigateur web Le «navigateur» est l'outil de l'internaute, lui permettant de surfer entre les pages web de ses sites préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de navigation, d'une barre d'adresse,...

1

Cabbie, le 4 jan 2008 à 12:17:55
  • +4

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

Répondre à Cabbie

6

 olivier, le 13 nov 2009 à 18:25:47

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

Répondre à olivier

2

axel50397, le 4 jan 2008 à 12:40:05
  • +1

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 !

Répondre à axel50397

3

Cabbie, le 4 jan 2008 à 14:21:41
  • +1

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

Répondre à Cabbie

4

axel50397, le 4 jan 2008 à 15:56:50
  • +1

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 ?

Répondre à axel50397

5

lyes-x2, le 2 jun 2009 à 17:12:08
  • +1

Tu peux faire ca en ajax,cherche un peu sur google ;P
bonne chance

Répondre à lyes-x2
Collection CommentÇaMarche.net