Comment savoir si une image a été vue par le visiteur

**berry** · 05/09/2008, 15h22

Bonjour à tous

Voilà, je dois savoir si une image <img src..... a été vue par l'utilisateur.

La page est assez grande, et je dois savoir si une image qui se trouve tout en bas ou ailleurs a été vue (savoir si le visiteur a deplacé la scroll bar jusque là).

Merci d'avance

**SpaceFrog** · 05/09/2008, 15h30

à part faire une fonction sur le onscroll du body qui declenche une requete ajax ...

sinon lui demander de clicker sur l'image ...

**berry** · 05/09/2008, 15h56

Envoyé par SpaceFrog

à part faire une fonction sur le onscroll du body qui declenche une requete ajax ...

sinon lui demander de clicker sur l'image ...

pourquoi pas mais comment savoir de facon précise que une image donnée (parmi d'autres) a été vue ?

Est-ce que ton idée était de calculer le scroll px par px ?

**_Mac_** · 05/09/2008, 17h28

Tu as plusieurs façons de faire. Déjà, l'événement onload existe sur l'objet JavaScript Image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function new_image_temp_loaded() {
    ...
}
 
image_temp        = new Image();
image_temp.onload = new_image_temp_loaded;

J'utilise ce code pour un de mes trucs. Ca marche avec FF 2, IE 6, Safari et Opera. En revanche, je ne sais pas si <img src="..." onload="..."> fonctionne.

Sinon, je crois que le navigateur appellera l'événement body.onload (<body onload="...">) lorsque toutes les images auront été chargées. Je ne sais pas si ça peut aider.

Autre solution mais faut coder côté serveur : c'est faire en sorte qu'un script soit appelé lorsqu'on demande une image. C'est un peu le principe des images générées dynamiquement avec une jolie URL (http://.../images/graphique.png), sauf que dans ton cas, ce n'est pas plus dynamique que ça. Ca peut se faire avec de l'URL rewriting. Par exemple, toutes les URL en /images_a_compter/xxx.jpg sont réécrites vers /images_a_compter/compteur.php, et ce compteur.php fonctionne de la façon suivante :

Localisation de l'image demandée
Envoi du Content-Type et Content-Length qui vont bien
Lecture et envoi de l'image demandée
Traitement qui signale que l'image a été lue en entier

Faut faire le traitement à la fin car s'il y a interruption de la connexion, on peut espérer que le script sera interrompu (en tout cas, faut faire en sorte qu'il le soit) et donc le traitement spécifique ne sera pas exécuté car l'image n'aura pas été chargée entièrement.

**berry** · 05/09/2008, 18h32

voici ce que je veux faire concretement

il s'agit de lire (comme un pdf) une suite d'images qui représente un livre/revue ou quoi que ce soit.

Un peu comme sur google books. On charge une page qui contient on va dire 300 images (pages). Seulement je ne veux charger que les images (pages) que le visiteur veut lire. Ca ne sert à rien de charger le reste , d'une pour un problème de bande passante mais aussi pour ne pas surcharger le navigateur.

Ainsi, je veux qu'une fois une image VUE par l'utilisateur, les 2 images suivantes commencent à se charger.

Dans google books, si on est à la page 1 et qu'on commence à scroller, on voit les pages "utiles" se charger une par une. J'aimerai faire plus ou moins la meme chose.

Comment savoir si une image a été vue par le visiteur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager