Ebben a bejegyzésben megnézzük, hogyan futtassunk JavaScript kódot az oldal betöltése után tiszta JS és jQuery használatával.
A JavaScript és a jQuery könyvtár többféle lehetőséget kínál egy funkció futtatására, miután a DOM készen áll. Ez a bejegyzés részletes áttekintést nyújt az ennek megvalósítására szolgáló módszerekről.
JavaScript
A tiszta JavaScriptben a teljesen betöltött oldal érzékelésének standard módszere az onload eseménykezelő tulajdonság használata. A betöltési esemény azt jelzi, hogy a weboldalon lévő összes eszköz betöltődött. Ezt a window.onload JavaScriptben a
|
1
2
3
|
ablakkal lehet meghívni.onload = function() {
alert(‘Page is loaded’);
};
|
Szerkesztés JSFiddle-ben
A következő kód a addEventListener() módszert használja a load eseményre való figyelésre a teljesen betöltött oldal érzékelésére. Ez megegyezik a fenti kóddal.
|
1
2
3
|
ablak.addEventListener(“load”, function() {
alert(‘Page is loaded’);
});
|
Szerkesztés JSFiddle-ben
Bár nem ajánlott, az oldal betöltésekor a HTML <body> tag segítségével is hívhatunk JavaScript függvényt. Az ötlet a onload attribútum használata a body tagben.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();” ></body>
<script>
function loaded() {
alert(‘Az oldal betöltődött’);
}
}
</script>
</html>
|
Szerkesztés JSFiddle-ben
Megjegyezzük, hogy a DOMContentLoaded esemény megfelelőbb lenne, ha csak akkor kell, hogy a kódunk akkor fusson, amikor a DOM teljesen betöltődött, anélkül, hogy megvárnánk a stíluslapok és képek betöltésének befejezését.
|
1
2
3
|
document.addEventListener(“DOMContentLoaded”, function() {
alert(‘Az oldal betöltődött’);
});
|
Szerkesztés JSFiddle-ben
jQuery
A jQuery segítségével a .ready() módszerrel, ami JavaScriptben a window.onload-nak felel meg, JavaScript kódot futtathatunk, amint a DOM teljesen betöltődött. A következő szintaxisok bármelyike használható, amelyek mind megegyeznek:
- $(document).ready(handler)
- $(“document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(dokumentum).ready(function() {
alert(‘Az oldal betöltődött’);
});
|
Szerkesztés JSFiddle-ben
Alternatívaként a $(handler) hívható, ami egyenértékű a fenti szintaxissal:
|
1
2
3
|
$(function() {
alert(‘Page is loaded’);
});
|
Szerkesztés JSFiddle-ben
A load eseményt a window objektumon a $(window).on("load", handler) módszerrel is figyelhetjük.
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘Az oldal betöltődött’);
});
|
Szerkesztés JSFiddle-ben