innerHTML dans une boucle

[bobyiii]

Bonjour à tous,

J'essaie de faire un petit pourcentage du chargement de mon site

En gros je charge des images au début, pendant se temps, j'affiche simplement un petit texte (ex: 10%) qui est sensé évolué au cours du temps

mais dans une boucle, le innerHTML ne se rafraichit pas donc je voudrais savoir s'il y a une solution...

voici un bout de code simple:

for(j=0;j<jmax;j++){

i++;

pourcentageChargment=parseInt(i/nbImages*100);

changerTexte(barre,pourcentageChargment+"%");

}

Merci bcp

bobyiii

[captain_torche]

Sans le code de la fonction changerTexte on va avoir du mal à deviner quoi que ce soit.

Pourrais-tu la poster ?

[bobyiii]

oups, oui pardon, voila:

function changerTexte(element, text){

element.innerHTML=text;

}

cette méthode fonctionne.

[captain_torche]

Techniquement, si j'essaye ceci, tout semble fonctionner très bien : http://jsfiddle.net/4kof4ay9/

Ne connaissant par la valeur de tes variables i et nbImages, je les ai enlevées, mais si souci il y a, cela ne devrait pas être lié à la boucle ni à innerHtml.

[bobyiii]

oui car on arrive a 100% et c'est ce qu'on veut, mais moi je veux voir les étapes, si tu essaye avec un sleep(),

le innerHTML ne se met plus a jour et du coup on voit seulement le résultat final.

var barre = document.getElementById('barre');

var jmax = 100;

for(j=0;j<=jmax;j++){

pourcentageChargment=j;

changerTexte(barre,pourcentageChargment+"%");

sleep(50);

}

function changerTexte(element, text){

element.innerHTML=text;

}

function sleep(milliseconds) {

var start = new Date().getTime();

for (var i = 0; i < 1e7; i++) {

if ((new Date().getTime() - start) > milliseconds){

break;

}

}

}

si jamais on met une fonction alert() dans la boucle, la mise a jour va se faire.

mais je veux pas d'un alert

un ami m'a dit de chercher avec la méthode permettant d'écrire dans la barre d'état mais je n'y parviens pas

[Portekoi]

Bonjour,

Tu dois utiliser un setTimeout() sinon, Javascript interprète tout à la suite. Et le "break" n'est vraiment pas à utiliser :

http://jsfiddle.net/L36u0u47/1/

A toi de l'étoffer.

Portekoi

[bobyiii]

ok, j'ai réussi, mais il y a un problème,

le setTimeout() se fait une fois que le script est terminé, c'est a dire que toute la page se charge et ensuite le pourcentage commence a se modifier
donc en gros mon problème n'est pas résolu =(

[Portekoi]

Il y a une différence entre résoudre un problème et faire le boulot pour toi... et le "j'ai réussi" est peut être un peu "too much" mais bon, bref :

http://jsfiddle.net/L36u0u47/2/

[bobyiii]

Je suis désolé mais ce n'est pas ce que je voudrais.

En gros j'ai une liste d'image, chaque image est placée au hasard quelque part sur ma page.

Ceci est fait dans une boucle.

Je voudrais que après chaque chargement d'image, le chiffre de mon pourcentage augmente.

mais avec ça, ça n'augmente qu'une fois le script terminé, quand les images sont déjà chargées.

Voici ma fonction en entier :

function RandomPlace()

{

    chargerImages();

    //c'est ici on lance une fonction qui est en bas var obj=document.getElementsByTagName('html')[0];

    var obj1=document.getElementById('randomBox');

    var largeur=80+Math.floor(Math.random()*1120);

    var hauteur=35+Math.floor(Math.random()*620);

    obj1.style.left=largeur+'px';

    obj1.style.top=hauteur+'px';

    obj1.className='pstn';

    var mintop=35;

    var maxtop=665;

    var minleft=80;

    var maxleft=1440;

    //var maxtry=300;

    var posTop=0;

    var posLeft=0;

    var posToppx=0;

    var posLeftpx=0;

    var tailleImage=80;

    tabdiv=document.getElementsByClassName('elt');

    var i=0;

    //var tries=0;

    var placed=[];

    var nbImages=tabdiv.length;

    var pourcentageChargment=0;

    var barre=document.getElementById('barre');

    barre.innerHTML =pourcentageChargment+"%";

    var delai = 500;

    while(tabdiv[i] )

    {

        posTop=mintop+Math.floor(Math.random()*(maxtop-mintop));

        posLeft=minleft+Math.floor(Math.random()*(maxleft-minleft));

        if((posLeft+tailleImage>largeur && posLeft-tailleImage<largeur+250) && (posTop+tailleImage>hauteur && posTop-tailleImage<hauteur+75))

        {

        }

        else

        {

            tabdiv[i].style.top=posTop+'px';

            tabdiv[i].style.left=posLeft+'px';

            tabdiv[i].style.zIndex=i;

            if(nonOverlap(tabdiv[i],placed))

            {

                placed.push(tabdiv[i]);

                i++;

                pourcentageChargment=parseInt(i/nbImages*100);

                changerTexte(barre,pourcentageChargment+"%");

                setTimeout('barre.innerHTML = \''+pourcentageChargment+'%\'', i * delai);

                //window.defaultStatus = "Helmuts Homepage";

                //document.showModalDialog("showModalDialog_target.htm", "", "10px;")  

                //sleep(50);

            }

        }

    }

    var largeurFenetre=obj.offsetWidth;

    var hauteurFenetre=obj.offsetHeight;

    var posSignatureTop=parseInt(obj1.offsetTop*hauteurFenetre/800);

    var posSignatureLeft=parseInt(obj1.offsetLeft*largeurFenetre/1600);

    while(posSignatureTop+75>hauteurFenetre && posSignatureTop>=1)

    {

        posSignatureTop--;

    }

    while(posSignatureLeft+200>

    largeurFenetre && posSignatureLeft>=1)

    {

        posSignatureLeft--;

    }

    obj1.style.left=parseInt(posSignatureLeft/largeurFenetre*100)+'%';

    obj1.style.top=parseInt(posSignatureTop/hauteurFenetre*100)+'%';

    i=0;

    while(tabdiv[i])

    {

        tabdiv[i].style.top=parseInt(tabdiv[i].offsetTop/800*100)+'%';

        tabdiv[i].style.left=parseInt(tabdiv[i].offsetLeft/1600*100)+'%';

        i++;

    }

    //document.getElementById('chargement').style.display="none";

}