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

Signaler
-
 jdru -
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
Messages postés
106
Date d'inscription
dimanche 7 février 2021
Statut
Membre
Dernière intervention
14 avril 2021
 11
Ta page, elle se charge en moins d'une seconde.
Where's the problem ? No problem.
Signaler

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
Signaler
> jdru
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.
Réponse 2 / 2

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?
Répondre Posez votre question