I dette indlæg vil vi se, hvordan du kører JavaScript-kode efter indlæsning af siden ved hjælp af ren JS og jQuery.
JavaScript- og jQuery-biblioteket tilbyder flere måder at udføre en funktion på, efter at DOM er klar. Dette indlæg giver en detaljeret oversigt over metoder til at opnå dette.
JavaScript
I ren JavaScript er standardmetoden til at registrere en fuldt indlæst side at bruge onload-hændelseshåndteringsegenskaben. Load-hændelsen angiver, at alle aktiver på websiden er blevet indlæst. Dette kan kaldes med window.onload i JavaScript.
|
1
2
3
|
vindue.onload = function() {
alert(‘Siden er indlæst’);
};
|
Rediger i JSFiddle
Den følgende kode bruger addEventListener()-metoden til at lytte efter load-hændelsen for at registrere en fuldt indlæst side. Dette svarer til ovenstående kode.
|
1
2
3
|
vindue.addEventListener(“load”, function() {
alert(‘Siden er indlæst’);
});
|
Rediger i JSFiddle
Og selv om det ikke anbefales, kan du også kalde en JavaScript-funktion ved indlæsning af siden ved hjælp af HTML <body>-tag. Ideen er at bruge onload-attributten i body-tagget.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();”></body>
<script>
function loaded() {
alert(‘Siden er indlæst’);
}
</script>
</html>
|
Rediger i JSFiddle
Bemærk, at DOMContentLoaded-hændelsen vil være mere hensigtsmæssig, hvis du blot har brug for, at din kode skal køre, når DOM’en er fuldt indlæst, uden at vente på, at stylesheets og billeder er færdige med at indlæse.
|
1
2
3
|
document.addEventListener(“DOMContentLoaded”, function() {
alert(‘Siden er indlæst’);
});
|
Rediger i JSFiddle
jQuery
Med jQuery kan du køre JavaScript-kode, så snart DOM er fuldt indlæst, ved hjælp af .ready()-metoden, som svarer til window.onload i JavaScript. Der kan anvendes en hvilken som helst af følgende syntakser, som alle er ens:
- $(document).ready(handler)
- $(“document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘Siden er indlæst’);
});
|
Rediger i JSFiddle
Alternativt kan $(handler) kaldes, hvilket svarer til ovenstående syntaks:
|
1
2
3
|
$(function() {
alert(‘Siden er indlæst’);
});
|
Rediger i JSFiddle
Du kan også holde øje med load-hændelsen på window-objektet ved hjælp af $(window).on("load", handler)-metoden.
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘Siden er indlæst’);
});
|
Rediger i JSFiddle