V tomto příspěvku se podíváme, jak spustit kód JavaScriptu po načtení stránky pomocí čistého JS a jQuery.
Knihovna JavaScriptu a jQuery nabízí několik způsobů, jak spustit funkci poté, co je DOM připraven. V tomto příspěvku najdete podrobný přehled metod, jak toho dosáhnout.
JavaScript
V čistém JavaScriptu je standardní metodou pro zjištění plně načtené stránky použití vlastnosti obsluhy události onload. Událost load indikuje, že byly načteny všechny prostředky na webové stránce. V jazyce JavaScript ji lze vyvolat pomocí window.onload.
|
1
2
3
|
okno.onload = function() {
alert(‚Stránka je načtena‘);
};
|
Úprava v JSFiddle
Následující kód používá metodu addEventListener() k naslouchání události load pro detekci plně načtené stránky. To odpovídá výše uvedenému kódu.
|
1
2
3
|
okno.addEventListener(„load“, function() {
alert(‚Stránka je načtena‘);
});
|
Upravit v JSFiddle
Ačkoli to není doporučeno, můžete také zavolat funkci JavaScriptu při načtení stránky pomocí značky HTML <body>. Jde o to, abyste v tagu body použili atribut onload.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=“loaded();“></body>
<script>
function loaded() {
alert(‚Stránka je načtena‘);
}
</script>
</html>
|
Upravit v JSFiddle
Všimněte si, že událost DOMContentLoaded by byla vhodnější, pokud potřebujete, aby se váš kód spustil až po úplném načtení DOM, aniž by čekal na dokončení načítání stylů a obrázků.
|
1
2
3
|
document.addEventListener(„DOMContentLoaded“, function() {
alert(‚Stránka je načtena‘);
});
|
Upravit v JSFiddle
jQuery
Pomocí jQuery můžete spustit kód JavaScriptu, jakmile je DOM plně načten, pomocí metody .ready(), která je ekvivalentem window.onload v JavaScriptu. Lze použít kteroukoli z následujících syntaxí, které jsou všechny stejné:
- $(document).ready(handler)
- $(„document“).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‚Stránka je načtena‘);
});
|
Upravit v JSFiddle
Alternativně lze zavolat $(handler), což odpovídá výše uvedené syntaxi:
|
1
2
3
|
$(function() {
alert(‚Stránka je načtena‘);
});
|
Upravit v JSFiddle
Můžete také sledovat událost load na objektu window pomocí metody $(window).on("load", handler).
|
1
2
3
|
$(window).bind(‚load‘, function() {
alert(‚Stránka je načtena‘);
});
|
Upravit v JSFiddle
.