In dit bericht bekijken we hoe we JavaScript-code uitvoeren na het laden van een pagina met behulp van pure JS en jQuery.
JavaScript en de jQuery-bibliotheek bieden verschillende manieren om een functie uit te voeren nadat het DOM klaar is. Dit bericht geeft een gedetailleerd overzicht van methoden om dit te bereiken.
JavaScript
In zuiver JavaScript is de standaardmethode om een volledig geladen pagina te detecteren, het gebruik van de onload event handler eigenschap. Het load event geeft aan dat alle assets op de webpagina zijn geladen. Dit kan worden aangeroepen met de window.onload in JavaScript.
|
1
2
3
|
window.onload = function() {
alert(‘Pagina is geladen’);
};
|
Edit in JSFiddle
De volgende code gebruikt de addEventListener()-methode om te luisteren naar de load-gebeurtenis om een volledig geladen pagina te detecteren. Dit is gelijkwaardig aan de bovenstaande code.
|
1
2
3
|
window.addEventListener(“load”, function() {
alert(‘Pagina is geladen’);
});
|
Edit in JSFiddle
Hoewel niet aanbevolen, kunt u ook een JavaScript-functie bij het laden van de pagina oproepen met behulp van HTML <body>-tag. Het idee is om onload attribuut in de body tag te gebruiken.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();” ></body>
<script>
functie geladen() {
alert(‘Pagina is geladen’);
}
</script>
</html>
|
Edit in JSFiddle
Merk op dat het DOMContentLoaded-event geschikter zou zijn als u alleen uw code wilt uitvoeren wanneer het DOM volledig is geladen, zonder te wachten tot stylesheets en afbeeldingen klaar zijn met laden.
|
1
2
3
|
document.addEventListener(“DOMContentLoaded”, function() {
alert(‘Pagina is geladen’);
});
|
Edit in JSFiddle
jQuery
Met jQuery kunt u JavaScript-code uitvoeren zodra het DOM volledig is geladen met behulp van de methode .ready(), die equivalent is aan window.onload in JavaScript. Elk van de volgende syntaxen kan worden gebruikt, die allemaal hetzelfde zijn:
- $(document).ready(handler)
- $(“document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘Pagina is geladen’);
});
|
Edit in JSFiddle
Als alternatief kan $(handler) worden aangeroepen, wat gelijkwaardig is aan bovenstaande syntaxis:
|
1
2
3
|
$(function() {
alert(‘Pagina is geladen’);
});
|
Edit in JSFiddle
U kunt ook letten op het load event op het window object met behulp van $(window).on("load", handler) methode.
|
1
2
3
|
$(venster).bind(‘load’, function() {
alert(‘Pagina is geladen’);
});
|
Edit in JSFiddle