Décrypter une image à un certain endroit du scroll d'une page.

Version imprimable

28/04/2020, 14h22
raouldouglas

Décrypter une image à un certain endroit du scroll d'une page.

Bonjour et merci pour l’aide que vous apportez sur les forums chaque jour.

J’ai une question concernant un script de décryptage d’image.
Voici la page web en question :

https://www.raoul-douglas.com/bd/fan...t1hd-test3.php

Il y a un script de décryptage qui décrypte une image encryptée qui possède la classe class="encrypted"

Ce script s’exécute au chargement des images dans la page si j’ai bien compris.

L’image de droite est une image décryptée classique.

Maintenant ce que j’aimerais faire, c’est décrypter une image encryptée qui ne possède pas la class="encrypted" à la base (donc qui n’est pas décryptée par le script au chargement de la page) en lui ajoutant cette classe arrivé à un certain endroit du scroll dans la page (ici, j’ai mis 250 pixels pour tester)

Ce que je ne sais pas faire, c’est exécuter le script de décrytage à un moment précis.
ça doit passer par l’action "decoder.init" j’ai l’impression…

À défaut de me donner la solution, si quelqu’un pouvait me dire si ce que je cherche à faire est possible sans avoir à recharger la page ?

Merci d’avance.

Hello, Oui c'est tt a fait possible.
Je vais essayer de répondre a ta question avec un exemple que tu peu tester:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
// identifier le parent de l'image car comme elle est en "display:none"
// on peut pas bien watch le moment ou elle est visible dans la zone du navigateur
const trs = document.querySelectorAll('tr');
// on utilise l'api IntersectionObserver pour economiser de la recource system
observer = new IntersectionObserver(entries => {
  // enusite pour chaque element watch on check la position dans la fenêtre du navigateur
  entries.forEach(entry => {
    // si c'est visible on decrype
    if (entry.intersectionRatio > 0) {
      // on chope l'element img pour récupéré son id
      const img = entry.target.querySelector('img');
      // avec l'id de l'image on chope le "num" qui lui correspond
      const num = img.id.split('cryptee')[0];
      // et enfin on decrypte
      decoder.init(num)
      console.log('in the view', img, num);
    } else {
      console.log('out of view');
    }
  });
});
// lance un observeur sur chaque parent TR
trs.forEach(tr => {
  observer.observe(tr);
});

Je suis pas certain que ce soie ce que tu veux mais cela p'eut te mettre sur la piste ;-)
Redemande si tu comprend pas bien l'exemple

30/04/2020, 15h09
raouldouglas

Merci pour ta réponse.
Je garde ta technique de côté. Elle a l'air vachement bien mais ça a l'air un peu compliqué vu que je ne connais pas toutes les syntaxes, donc je tatonne en fait. ^_^'
Donc il faut que je prenne le temps de me pencher dessus.

En fait depuis deux jours j'ai bien avancé, et j'ai réussi ce que je voulais faire avec des scrolls, mais je me suis rendu compte que c'était encore trop gourmand en ressource, du coup là je me suis rabattu sur une boucle toute bête qui décrypte une image toutes les 2 secondes avec un settimeout, comme ça ça se fait en fond pendant que le lecteur commence à lire. ;-)

Merci beaucoup en tout cas.
30/04/2020, 16h56
FazioNico

Yes content que tu ai trouvé seul une manière de ne pas rester bloqué.
C'est le plus important ;)

Après tu verra qu'a force de pratiqué tu sera de plus en plus alaise avec la syntaxe.. JS c'est plus facile que le français je trouve ;)
Bonne continuation