Sujet Précédent Sujet Suivant

Probleme avec du scroll drawing quand la page n'est pas entierement chargée

Fermé
jdru - Modifié le 2 mars 2021 à 18:10
 jdru - 26 mars 2021 à 13:16
Bonjour,
J'ai un probleme (évidemment).J'ai une carte svgsur mon site internet. J'ai des photos qui correspondent à la carte, et je voudrais que la carte se dessine pendant que je scrolle vers le bas pour voir les photos.
J'utilise ce code: 
    <script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction(){
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;
  
  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
}
</script>


Le problème, c'est que lorsque la page n'est pas entieremment chargée, c'est à dire, lorsque les photos sur la page ne sont pas toutes chargées, et que je scrolle vers le bas, la ligne qui se dessine sur la carte se recharge. Vous pouvez voir en cliquant sur le lien suivant:

https://gvng.fr/marne

C'est du au fait que dans le code, le chargement de la ligne correspond au pourcentage de scroll effectué sur la page.
Comment puis je faire pour que la ligne se dessine correctement meme si la page n'est pas entièrement chargée. Je voudrais qu'elle se dessine de "tant" lorsqu'on scrolle d'une photo à l'autre.

Merci de prendre le temps de me lire et de me répondre. j'espère que c'est clair.
^^
Jérémie

EDIT : Ajout des balises de code

Configuration: Windows / Firefox 86.0

2 réponses

Réponse 1 / 2
Utilisateur anonyme
4 mars 2021 à 17:19
Ta page, elle se charge en moins d'une seconde.
Where's the problem ? No problem.
0
jdru
10 mars 2021 à 18:50
le problème, c'est pas le temps de chargement, c'est qu'il faut que toute la page soit chargée, donc commencer par scroller tout en bas, pour que la ligne evolue de la bonne facon
0
Narwaoudi > jdru
25 mars 2021 à 22:56
Salut,
et mettant votre code dans un 
window.onLoad= function(){
//--- code ici
}
//-- ou même chose avec une syntaxe plus verbeuse
window.addEventListener('load',function(){
//-- mon JS
})
//-- on peut aussi remplacer la fonction anonyme par un appel à une fonction nommée
function maFonction(){
//-- mon code
}

window.onLoad= maFonction();
//-- ou 
window.addEventListener('load',maFonction());

ça devrait régler le problème:
l'événement onload va 'appliquer' les instructions uniquement quand l'objet DOM window est chargé.
document.body.onload revient quasiment au même mais est un peu moins fiable.
0
Réponse 2 / 2
jdru
26 mars 2021 à 13:16
Merci.
J'ai essayé de l'écrire comme ca mais ca ne marche pas: 



<script>
window.onLoad= function(){
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction(){
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;
  
  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
}
}
</script>


J'ai manqué quelque chose?
0