Run script bij zowel het laden van de pagina maar ook bij resize en scroll
Ik ben bezig om een script te maken met javascript maar wil dit ook maken voor de toekomst.
Op de pagina waar ik dit op wil laten uitvoeren geef wil ik simpelweg de functie aanroepen met als parameter waar het om gaat.
Code (php)
1
2
3
2
3
<script type="text/javascript">
loadData('.viewdata');
</script>
loadData('.viewdata');
</script>
Deze functie wil ik aanroepen bij het laden van de pagina, het scrollen en eventueel het resizen.
Dat de functie dit bij die 3 dingen doen wil ik inbouwen in de code.
Op welke manier zouden jullie dit maken, zodat ik niet de events steeds opnieuw hoef aan te roepen op de pagina's zelf zoals:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
window.addEventListener("scroll", function(){
// function
});
window.addEventListener("onload", function(){
// function
});
window.addEventListener("resize", function(){
// function
});
// function
});
window.addEventListener("onload", function(){
// function
});
window.addEventListener("resize", function(){
// function
});
Gewijzigd op 26/10/2020 18:52:17 door Loek Lemmens
In platte javascript zul je inderdaad met addEventListener moeten werken, ik denk dat jouw voorbeeldje qua opzet redelijk klopt.
De event namen kloppen niet, welke beschikbaar zijn voor het Window object vind je hier: https://developer.mozilla.org/nl/docs/Web/API/Window.
Je gaat uitkomen op de Window.onscroll, Window.onresize en Document.onload (of Document.onloadend) events.
Alles monitoren en daar op acteren via JavaScript hoeft niet per definitie de (enige) oplossing te zijn. Mogelijk zijn er ook alternatieven in CSS (media queries en andere stijlregels) die het gewenste gedrag goed genoeg (of zelfs beter) benaderen.
Teveel JavaScript of een verkeerde toepassing hiervan kan de boel enorm vertragen wat natuurlijk niet echt een fantastische gebruikerservaring oplevert.
