En réponse à otto qui écrivit, en date du : 8/09/07 13:30, le message
suivant :
> Bonjour
> J'ai un répertoire avec des milliers de photos (env. 10k)

une folie !
(combien de mégas au total ?)

> que je sélectionne à l'aide d'un script PHP
> dans un tableau. Ce tableau est ensuite utilisé par une fonction Javascript pour les feuilleters.
>
> Avant que je puisse utiliser la commande avant ou arrière je dois attendre que le tableau soit downloadé dans
> mon browser.
>
> Question est il possible d'afficher une barre de progression en JavaScript pour voir l'état du download ?
> si oui comment ?
>
> Merci d'avanc pour l'idée ou un lien internet.
>
> Otto
>
>
> Exemple simplifié du source:
>
> Partie PHP
> Lecture du répertoire et charge le tableau image
> *************
> $dossier=opendir ($repertoir);

$by = 0;

> while ($file = readdir ($dossier)) {
> if($file != "." && $file != "..") {
> echo "image[$by]='$repertoir$file';\n";
> $by++;
> $last_pic = $repertoir.$file;
> }
> }
> closedir($dossier);
>
>
Partie JavaScript
affichage du des images
*******************
image.sort();

var actuel=0, ende=image.length, r=0, animation = [];

// mise en cache forcée et variation de la barre :

function postCharge() {
if(r < ende){
animation[r] = new Image();
animation[r].onload = postCharge;
animation[r].src = image[r];
r++;
// pourcentage chargé
var prct = Math.floor((r/ende)*100-1);
// variation de la barre
document.getElementById('barre').style.width = prct + '%';
document.getElementById('barre').innerHTML = r+'/'+ende;
// ou
// document.getElementById('barre').innerHTML = prct+'%';
}
else // fin de chargement, hop! plus de barre
document.getElementById('attente').style.display = 'none';
}

// en fin de chargement de la page :
// 1) création et affichage de la barre
// 2) post chargement des k images

window.onload = function() {
var b = document.createElement('div');
b.id = 'attente';
b.style.position = 'absolute';
b.style.top = '150px';
b.style.left = '8%';
b.style.width = '80%';
b.style.border = '4px inset #555';
b.style.backgroundColor = '#ddd';
var i = document.createElement('div');
i.id = 'barre';
i.style.margin = '3px';
i.style.width = '1px';
i.style.height = '12px';
i.style.border = '2px outset green';
i.style.backgroundColor = 'lime';
i.style.textAlign = 'right';
b.appendChild(i);
document.body.appendChild(b);
postCharge();
}

function feuilleter(direction) {
if (direction == 1) {
actuel++;
if (actuel >= ende) {
actuel = 0;
}
}
else {
actuel-- ;
if (actuel < 0 ) {
actuel = -1+ende;
}
}

document.images.dummy.src=animation[actuel].src;
document.getElementById('info').innerHTML='image : ' +
(+1+actuel)+'/'+ende;
}
</script>

<div align=center>
" . ($by-1) ." images<br>;
<spam id=info></spam><br />
<<
<a href="javascript: feuilleter(-1);">en arrière</a>
<a href="javascript: feuilleter(1) ;">en avant</a>
>> >>
<br><br>
<img src="<? echo $last_pic; ?>" name="dummy">
</div>




--
sm