Bonjour
J'ai un répertoire avec des milliers de photos (env. 10k) 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 = 1;
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=$by-1;

for(r=1; r < $by; r++){
animation[r]=new Image(); animation[r].src=image[r];
}

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

document.images.dummy.src=animation[actuel].src;
}
</script>

<div align=center>
" . ($by-1) ." images<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>

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

On Sat, 08 Sep 2007 15:56:20 +0200, ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Bonjour Stephane,

>(combien de mégas au total ?)
>
Selon la sélection, mais entre 1 et 10 MB!

Encore merci pour l'exemple je vais tester cela prochainement.

Otto

>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.displa y = '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>

En réponse à otto qui écrivit, en date du : 9/09/07 20:09, le message
suivant :
>
> Encore merci pour l'exemple je vais tester cela prochainement.

Si ce n'est pas un truc perso mais à diffuser sur le Net, pour le test
il serait prudent de vider les caches du navigateur ou de changer le nom
du(des) dossier(s) conteneur(s).

(L'exemple marche bien chez moi)
(mais ... pas testé sur plus de qques vues !)

Voir aussi à appendChilder le bazar d'attente dans le div de
visualisation plutôt qu'en pleine fenêtre.


--
sm

On Sun, 09 Sep 2007 23:12:28 +0200, ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Non c'est pour une utilisation personnelle. En fait c'est une webcam qui transfert toutes les minutes par FTP
une image chez mon hébergeur. Chaques image fais env. 10kb.

Je bricole cela comme hobby. Je n'ai pas encore testé la routine.
Encore merci.

>En réponse à otto qui écrivit, en date du : 9/09/07 20:09, le message
>suivant :
>>
>> Encore merci pour l'exemple je vais tester cela prochainement.
>
>Si ce n'est pas un truc perso mais à diffuser sur le Net, pour le test
>il serait prudent de vider les caches du navigateur ou de changer le nom
>du(des) dossier(s) conteneur(s).
>
>(L'exemple marche bien chez moi)
>(mais ... pas testé sur plus de qques vues !)
>
>Voir aussi à appendChilder le bazar d'attente dans le div de
>visualisation plutôt qu'en pleine fenêtre.