tfe Homepage

Je fais partager ici un petit script que j'ai code pour creer une petite barre de chargement d'un fichier en php/javascript.
Le principe est plutôt simple:

• La page appelle le fichier via xmlhttpRequest

• Le fichier que l'on appelle va se charger de temporiser la sortie, de faire de temps en temps de flush afin de nous informer de l'etat de l'avancee de l'envoie.

• Le script JS va recevoir au fur et e  mesure ces donnees, et montrer l'etat d'avancement dans la barre de chargement.

Si le fichier cible n'a pas renseigne l'entete HTTP Content-Length, le script JS avancera de 1% e  chaque fragment reçu.

Il ne s'agit bien sûr que d'un exemple de script, dont vous pouvez vous inspirer au besoin. Il est base sur la librairie javascript prototype, que vous pouvez recuperer sur le site officiel.

Le script:

function creation_barre_chargement( lien)
{
    // Creation du fond grise©
    var back= document.createElement('DIV');
    back.style.position='absolute';
    back.style.top='0px';
    back.style.left='0px';
    back.style.width='100%';
    back.style.height='100%';
    back.style.background='white';
    back.style.opacity='0.8';
    back.style.filter='alpha(opacity=80)';

    // Creation de la barre de chargement
    var div= document.createElement('DIV');
    div.style.position='absolute';
    div.id='barre_chargement';
    div.style.width='40%';
    div.style.marginLeft='30%';
    div.style.marginTop='10%';
    div.style.border="1px solid black";
    div.style.background="#d0d0d0";
    div.style.height='20px';

    // Creation de l'avancement de la barre de chargement
    var p= document.createElement('P');
    p.style.margin='0px';
    p.style.width='0px';
    p.style.padding='0px';
    p.style.borderLeft='1px solid #333';
    p.style.height='100%';
    p.style.background='green';
    p.style.fontWeight='bold';
    p.id='pourcentage_accompli';
    p.style.textAlign='right';

    // Texte de l'avancement de la barre de chargement
    var txt= document.createTextNode('0%');

    // Ajout des elements DOM
    p.appendChild(txt);
    div.appendChild(p);
    back.appendChild(div);
    document.body.appendChild(back);

    // Gestion de la re©cuperation du fichier
    myAjax=new Ajax.Request( lien.href, {
        method: 'get',
        onInteractive : function(response)
        {
            if(response.getHeader('Content-Length')!='')
            {
                var pourcentage=$('pourcentage_accompli').getWidth()/$('barre_chargement').getWidth()*100;
                pourcentage+=1;
            }
            else
            {
                var pourcentage= myAjax.transport.responseText.length/response.getHeader('Content-Length')*100;
           }
            if(pourcentage>100)
            {
                pourcentage=0;
            }
            $('pourcentage_accompli').style.width=pourcentage+'%';
            $('pourcentage_accompli').firstChild.nodeValue=pourcentage.toFixed(2)+'%';
        },
        onSuccess: function() {
            document.location.href='#'+lien.href;
            document.body.update(myAjax.transport.responseText);
        }
    });
}

Event.observe(window, 'load', function()
{
    $$('.loading_item').each(
        function(item)
        {
            item.onclick= function() { creation_barre_chargement(item); return false; }
        }
    );
});

Un exemple d'appel  est disponible sur cette page: barre de chargement pourcentage en javascript.
Source du fichier test.php:

$html="
blah blah blah
bah blah blah
bah blah blah
blah blah bla
blah blah bla
";

header("Content-Length:".strlen($html));

foreach(preg_split("/[
]/",$html) as $v_text)
{
    print "$v_text
";
    flush();
    sleep(1);
}