barre de progression pour le download d'un tableau ?

Le
otto
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';";
$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Înter>
" . ($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>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
ASM
Le #752003
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Înter>
" . ($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




otto
Le #757741
On Sat, 08 Sep 2007 15:56:20 +0200, ASM
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.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Înter>
" . ($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>






ASM
Le #757740
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

otto
Le #757739
On Sun, 09 Sep 2007 23:12:28 +0200, ASM
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.



Publicité
Poster une réponse
Anonyme