barre de progression pour le download d'un tableau ?

ASM

08/09/2007 à 15:56

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

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

Vous avez filtré cet utilisateur ! Consultez son message

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

09/09/2007 à 20:09

On Sat, 08 Sep 2007 15:56:20 +0200, ASM 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.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>

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.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>

Vous avez filtré cet utilisateur ! Consultez son message

On Sat, 08 Sep 2007 15:56:20 +0200, ASM 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.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

09/09/2007 à 23:12

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

10/09/2007 à 12:56

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

barre de progression pour le download d'un tableau ?

4 réponses

Veuillez sélectionner un problème