OVH Cloud OVH Cloud

compter des images

18 réponses
Avatar
Christophe PEREZ
Bonjour,

Je sais que le titre n'est pas très évocateur, mais je n'ai pas trouvé
mieux.
Supposons un script js, qui précharge des images dont le nombre et les
url sont indiquées en dur. Tout ça, c'est simple, on sait faire.

Par contre, je bute sur un truc tout bête quand je veux passer à un
autre principe.
En effet, je voudrais que ceci soit "dynamique" au sens où je ne voudrais
pas avoir à indiquer le nombre d'images, qu'elles soient toutes à un
emplacement défini, avec un nom standard genre imageXXX.gif, XXX variant
de 000 à 999, sans trou...

J'ai donc pensé faire un script de préchargement classique, tester le
img.complete par rapport à une tempo maxi, et déduire, si cette tempo
est dépassée, que cette image n'existe pas, et donc, en déduire le
nombre d'images.
(Je vous rassure de suite, ne cherchez pas la petite bête ici, je n'aurai
pas de problème avec un tempo dépassée à tort etc... puisqu'en fait,
ces images se trouvent dans le chrome de mon application XUL, donc
localement sur la machine de l'utilisateur pour ceux à qui chrome et XUL
ne parlent pas.)

Seulement, c'est idiot, mais, à moins que ça ne soit moi qui déraille
complètement, quand je teste le 'complete' sur une image qui n'existe
pas, je reçois un 'true' !?!

Verriez-vous une solution simple à mon besoin ?

Merci d'avance.

--
Christophe PEREZ
Écrivez moi sans _faute !

8 réponses

1 2
Avatar
Christophe PEREZ
Le Sat, 01 Oct 2005 17:56:15 +0200, O.L a écrit:

Ben, la propriété complete doit indiquer :
a) si l'image est en cours de chargement, ou bien
b) si elle a complètement fini de se charger.
Dans le cas d'une image qui n'existe pas, est ce que cette image est
encore en cours de chargement ? Non. Donc elle a fini de se charger.


J'avoue que ce que tu dis n'est pas idiot du tout. Mais ce n'est pas ce
qu'on (je) comprends de la doc.
Mais, dans ce cas, je trouve quand même dingue qu'il n'y ait aucun moyen
de savoir si le chargement a au moins débuté.
Parce que avec ça, on aurait pu tout savoir, genre :
if ( img.started == false && img.complete == true )
exists = false;

C'est pas de la logique ça ?? :-D


Si, mais j'ai appris que bien souvent la logique n'est pas conforme au
fonctionnement réel et qu'en général, il vaut mieux s'appuyer sur les
spécifications ;-)

if(Christophe_Perez.getAnswer() == 'yes') alert("Hahaha !!! I'm the
best ...");
else alert("Va dire ça aux programmeurs d'IE !");


Ben, pour une fois, il ne s'agit nullement de IE, mais carrément de
Xulrunner, alors tu vois... ;-)
Si ça se trouve, IE, lui, renverrait false pour le complete, pas testé.

--
Christophe PEREZ
Écrivez moi sans _faute !

Avatar
ASM

Ben, pour une fois, il ne s'agit nullement de IE, mais carrément de
Xulrunner, alors tu vois... ;-)
Si ça se trouve, IE, lui, renverrait false pour le complete, pas testé.


J'ai la nette impression que tous les navigateurs se plient
à ce que dit Olivier

une image inexistante est complete=true;
ce qui ne nous avance guère pour stopper
la boucle interrogeant sur le chargement.

J'ai un peu essayé de trouver un truc ... mais ... bof bof pas terrible

Je me sers du onload sur l'image
et donc si le onload n'arrive pas (pas d'image)
j'ai un event qui n'en finit jamais et ce ne m'a pas l'air tip top

Serait donc interressé par ton code.


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Christophe PEREZ
Le Sun, 02 Oct 2005 13:36:08 +0200, ASM a écrit:

J'ai la nette impression que tous les navigateurs se plient
à ce que dit Olivier


Pas très surpris ;-)

une image inexistante est complete=true;
ce qui ne nous avance guère pour stopper
la boucle interrogeant sur le chargement.


C'est clair.

J'ai un peu essayé de trouver un truc ... mais ... bof bof pas terrible

Je me sers du onload sur l'image
et donc si le onload n'arrive pas (pas d'image)
j'ai un event qui n'en finit jamais et ce ne m'a pas l'air tip top

Serait donc interressé par ton code.


Ben, mon code intégral n'aurait peut-être pas beaucoup de sens parce
que complètement entre-mélée de XBL pour XUL ;-)
mais disons que voici la partie névralgique qui reprend le principe de
base que j'avais expliqué cumulant "complete", "width" et "height" :

var tabl = new Array(); // tableau de stockage des "images" (global)
var img; // image (global)
var datecharg = null; // date/time début chargement image (global)
const tempo = 5; // temporisation en sec pour considérer chargement
échoué
const chemin = "http://le/chemin/vers/mes/images";
var nbre = 0; // nombre d'images (global)

// lance le préchargement de l'image numéro "nbre"
function prechargement() {
datecharg = new Date();
img = new Image();
img.src = chemin + rajoutZero(nbre+1,3) + ".gif";
attenteImg();
}

// teste fin chargement image numéro "nbre"
function attenteImage() {
if (timercharg)
clearTimeout(timercharg);// effacement du chrono en cours
if ( img.complete && (img.width || img.height) ) {
tabl[ this.nbre++ ] = img;
prechargement(); // on passe à l'image suivante
} else if ( datecharg && (new Date().getTime() - datecharg.getTime() ) > (tempo * 1000) ) {
datecharg = null;
img = null; // on abandonne puisqu'il ne doit plus y avoir d'images
} else { // on poursuit le bouclage jusqu'à fin tempo
timercharg = setTimeout("attenteImg()",500);
}
}

Voilà, saisi à la volée, donc sujet à erreurs.

--
Christophe PEREZ
Écrivez moi sans _faute !

Avatar
ASM

Ben, mon code intégral n'aurait peut-être pas beaucoup de sens parce
que complètement entre-mélée de XBL pour XUL ;-)
mais disons que voici la partie névralgique qui reprend le principe de
base que j'avais expliqué cumulant "complete", "width" et "height" :


Oui, c'est ce que je voulais exprimer : quelle est ton approche ?

var tabl = new Array(); // tableau de stockage des "images" (global)
var img; // image (global)
var datecharg = null; // date/time début chargement image (global)
const tempo = 5; // temporisation en sec pour considérer chargement
échoué


là pour le tempo, j'essaie de l'évaluer par rapport à la vitesse
de connexion et au poids supposé de l'image la + lourde.

const chemin = "http://le/chemin/vers/mes/images";
var nbre = 0; // nombre d'images (global)

// lance le préchargement de l'image numéro "nbre"
function prechargement() {
datecharg = new Date();
img = new Image();


c'est là que j'interpose :
ing.onload = chargement_image_suivante;
ce qui est bien pratique si on sait comment
ne pas lancer ce chargement de suivante ... !

img.src = chemin + rajoutZero(nbre+1,3) + ".gif";
attenteImg();
}

// teste fin chargement image numéro "nbre"
function attenteImage() {
if (timercharg)
clearTimeout(timercharg);// effacement du chrono en cours
if ( img.complete && (img.width || img.height) ) {
tabl[ this.nbre++ ] = img;
prechargement(); // on passe à l'image suivante
} else if ( datecharg && (new Date().getTime() - datecharg.getTime() ) > (tempo * 1000) ) {
datecharg = null;
img = null; // on abandonne puisqu'il ne doit plus y avoir d'images
} else { // on poursuit le bouclage jusqu'à fin tempo
timercharg = setTimeout("attenteImg()",500);
}
}

Voilà, saisi à la volée, donc sujet à erreurs.


OK, je va z'essayer voir
Merci


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
O.L.
ASM a formulé la demande :
J'ai la nette impression que tous les navigateurs se plient
à ce que dit Olivier


Bah j'espère bien !
Ils ont intérêt à m'obérir au doigt et à l'oeil, ces satanés
navigateurs !! :-D

Avatar
O.L.
function attenteImage() {
if (timercharg)
clearTimeout(timercharg);// effacement du chrono en cours
if ( img.complete && (img.width || img.height) ) {
tabl[ this.nbre++ ] = img;
prechargement(); // on passe à l'image suivante
} else if ( datecharg && (new Date().getTime() - datecharg.getTime() ) >
(tempo * 1000) ) {
datecharg = null;
img = null; // on abandonne puisqu'il ne doit plus y avoir d'images
} else { // on poursuit le bouclage jusqu'à fin tempo
timercharg = setTimeout("attenteImg()",500);
}
}


Moi j'aurais dis :

function attenteImg() {
clearTimeout(timercharg);
if(img.complete && (img.offsetWidth!( || img.offsetHeight!0) )
{

... et après, même chose.

Mais les valeurs 28 et 30 ne sont peut être valables que pour IE.
Et elles ne sont valables que si ton image est intégrée au document, je
pense, avec une belle balise IMG.
Au pire, tu la met avec un petit style="visibility:hidden" pour qu'elle
ne gêne pas ...

@+
Olivier

Avatar
Christophe PEREZ
Le Mon, 03 Oct 2005 13:48:14 +0200, ASM a écrit:

là pour le tempo, j'essaie de l'évaluer par rapport à la vitesse
de connexion et au poids supposé de l'image la + lourde.


Bien entendu. Moi, j'ai mis 5 secondes, mais j'aurais pu mettre moins
puisque mes images seront toujours locales (chrome ou lan), et elles sont
relativement légères (bannières de 60px de haut).

c'est là que j'interpose :
ing.onload = chargement_image_suivante;
ce qui est bien pratique si on sait comment
ne pas lancer ce chargement de suivante ... !


Oui, bien sûr, ça doit être jouable aussi. En gérant une tempo, de la
même manière.

OK, je va z'essayer voir
Merci


Je t'en prie.

--
Christophe PEREZ
Écrivez moi sans _faute !

Avatar
Christophe PEREZ
Le Mon, 03 Oct 2005 19:34:53 +0200, O.L a écrit:

Moi j'aurais dis :

function attenteImg() {
clearTimeout(timercharg);
if(img.complete && (img.offsetWidth!( || img.offsetHeight!0) )
{


Franchement, pour moi, aucun intérêt. Ce que j'ai fait fonctionne, et
ça me suffit largement ;-)

Mais les valeurs 28 et 30 ne sont peut être valables que pour IE.


De toutes les façons, IE, je n'en ai strictement rien à faire.
Tout ceci est embarqué dans du XUL, donc utilisable seulement sur moteur
Gecko (pour l'instant, tests sur xulrunner 1.9).

Et elles ne sont valables que si ton image est intégrée au document, je
pense, avec une belle balise IMG.


Balise qui n'existe pas en XUL ;-)

Au pire, tu la met avec un petit style="visibility:hidden" pour qu'elle
ne gêne pas ...


Et je cache donc la précédente bannière ? Arf'...
Mais non, ne t'embête pas plus.
Ma solution me convient parfaitement, et il n'y a à priori rien à y
changer dans mon cas.
J'ai maintenant mon widget XBL qui se charge automatiquement de tout le
travail de gestion de mes bannières rien qu'en mettant un simple
<hbox id="box_banniere" /> dans mon XUL ;-)

--
Christophe PEREZ
Écrivez moi sans _faute !

1 2