I det här inlägget kommer vi att se hur man kör JavaScript-kod efter sidladdning med ren JS och jQuery.
JavaScript- och jQuery-biblioteket erbjuder flera olika sätt att köra en funktion efter att DOM är klar. Det här inlägget ger en detaljerad översikt över metoder för att åstadkomma detta.
JavaScript
I ren JavaScript är standardmetoden för att upptäcka en fullt laddad sida att använda egenskapen onload event handler. Lasthändelsen indikerar att alla tillgångar på webbsidan har laddats. Detta kan anropas med window.onload i JavaScript.
|
1
2
3
|
fönster.onload = function() {
alert(’Page is loaded’);
};
|
Redigera i JSFiddle
Följande kod använder addEventListener()-metoden för att lyssna på load-händelsen för att upptäcka en helt laddad sida. Detta motsvarar ovanstående kod.
|
1
2
3
|
window.addEventListener(”load”, function() {
alert(’Page is loaded’);
});
|
Redigera i JSFiddle
Och även om det inte rekommenderas kan du också anropa en JavaScript-funktion vid sidladdning med hjälp av HTML-tagg <body>. Tanken är att använda onload-attributet i body-taggen.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();”></body>
<script>
function loaded() {
alert(’Sidan är laddad’);
}
</script>
</html>
|
Redigera i JSFiddle
Notera att DOMContentLoaded-händelsen är lämpligare om du bara vill att koden ska köras när DOM är helt laddad, utan att vänta på att formatmallarna och bilderna ska vara färdiga.
|
1
2
3
|
document.addEventListener(”DOMContentLoaded”, function() {
alert(’Page is loaded’);
});
|
Redigera i JSFiddle
jQuery
Med jQuery kan du köra JavaScript-kod så snart DOM är helt laddat med hjälp av .ready()-metoden som motsvarar window.onload i JavaScript. Någon av följande syntaxer kan användas, som alla är likadana:
- $(document).ready(handler)
- $(”document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(’Page is loaded’);
});
|
Redigera i JSFiddle
Alternativt kan $(handler) anropas vilket är likvärdigt med ovanstående syntax:
|
1
2
3
|
$(function() {
alert(’Page is loaded’);
});
|
Redigera i JSFiddle
Du kan också hålla utkik efter load-händelsen på window-objektet med $(window).on("load", handler)-metoden.
|
1
2
3
|
$(window).bind(’load’, function() {
alert(’Page is loaded’);
});
|
Redigera i JSFiddle