Aller au contenu

innerHTML dans une boucle


bobyiii

Sujets conseillés

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


Lien vers le commentaire
Partager sur d’autres 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
Lien vers le commentaire
Partager sur d’autres 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 =(

Lien vers le commentaire
Partager sur d’autres 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";
}
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...