Run script bij zowel het laden van de pagina maar ook bij resize en scroll

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Loek Lemmens

Loek Lemmens

26/10/2020 18:49:11
Quote Anchor link
Beste leden,


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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script type="text/javascript">
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)
PHP script in nieuw venster Selecteer het PHP script
1
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
});
Gewijzigd op 26/10/2020 18:52:17 door Loek Lemmens
 
PHP hulp

PHP hulp

19/03/2024 07:15:03
 
Thom nvt

Thom nvt

27/10/2020 08:35:27
Quote Anchor link
Ik zou het met behulp van jQuery doen, maar dat is een persoonlijke keuze.

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.
 
Thomas van den Heuvel

Thomas van den Heuvel

27/10/2020 13:48:46
Quote Anchor link
@Loek zou je uit kunnen leggen wat je probeert te bereiken? Dan is het namelijk ook makkelijker om te bepalen of de ingeslagen weg / de gekozen aanpak zich het beste leent voor hetgeen je probeert te doen.

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.