Jump to content
bobyiii

innerHTML dans une boucle

Recommended Posts

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


Share this post


Link to post
Share on other sites

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



Pourrais-tu la poster ?

Share this post


Link to post
Share on other sites
oups, oui pardon, voila:


function changerTexte(element, text){

element.innerHTML=text;

}


cette méthode fonctionne.

Share this post


Link to post
Share on other sites

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.


Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 =(

Share this post


Link to post
Share on other sites

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";
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...