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

jdru -
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

Afficher la suite

A voir également:

Probleme avec du scroll drawing quand la page n'est pas entierement chargée
Supprimer page word - Guide
Capture d'écran page entière - Guide
La page ne peut être affichée. (80710a06) - Forum PS3
Imprimer tableau excel sur une page - Guide
Page d'accueil - Guide

2 réponses

Réponse 1 / 2

Utilisateur anonyme

Ta page, elle se charge en moins d'une seconde.
Where's the problem ? No problem.

jdru

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

Narwaoudi > 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

jdru

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>

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

EDIT : Ajout des balises de code

2 réponses

Votre réponse

Discussions similaires