W tym poście zobaczymy jak uruchomić kod JavaScript po załadowaniu strony używając czystego JS i jQuery.
Biblioteka JavaScript i jQuery oferuje kilka sposobów na wykonanie funkcji po tym jak DOM jest gotowy. Ten post zawiera szczegółowy przegląd metod, aby to osiągnąć.
JavaScript
W czystym JavaScripcie, standardową metodą wykrywania w pełni załadowanej strony jest użycie właściwości obsługi zdarzenia onload. Zdarzenie load wskazuje, że wszystkie zasoby na stronie zostały załadowane. Można to wywołać za pomocą window.onload w JavaScript.
|
1
2
3
|
window.onload = function() {
alert(’Strona jest załadowana’);
};
|
Edycja w JSFiddle
Poniższy kod wykorzystuje metodę addEventListener() do nasłuchiwania zdarzenia load w celu wykrycia w pełni załadowanej strony. Jest to równoważne z powyższym kodem.
|
1
2
3
|
window.addEventListener(„load”, function() {
alert(’Strona jest załadowana’);
});
|
Edycja w JSFiddle
Ale nie jest to zalecane, możesz również wywołać funkcję JavaScript przy ładowaniu strony używając znacznika HTML <body>. Chodzi o to, aby użyć atrybutu onload w znaczniku body.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();” ></body>
<script>
function loaded() {
alert(’Strona jest załadowana’);
}
</script>
</html>
|
Edytuj w JSFiddle
Zauważ, że zdarzenie DOMContentLoaded będzie bardziej odpowiednie, jeśli chcesz, aby twój kod był uruchamiany, gdy DOM jest w pełni załadowany, bez czekania na zakończenie ładowania arkuszy stylów i obrazów.
|
1
2
3
|
document.addEventListener(„DOMContentLoaded”, function() {
alert(’Strona jest załadowana’);
});
|
Edytuj w JSFiddle
jQuery
Dzięki jQuery możesz uruchomić kod JavaScript, gdy tylko DOM zostanie w pełni załadowany, używając metody .ready(), która jest odpowiednikiem window.onload w JavaScript. Można użyć dowolnej z następujących składni, które są takie same:
- $(document).ready(handler)
- $(„document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(’Strona jest załadowana’);
});
|
Edytuj w JSFiddle
Alternatywnie można wywołać $(handler), co jest równoważne powyższej składni:
|
1
2
3
|
$(function() {
alert(’Strona jest załadowana’);
});
|
Edytuj w JSFiddle
Możesz również obserwować zdarzenie load na obiekcie window za pomocą metody $(window).on("load", handler).
|
1
2
3
|
$(window).bind(’load’, function() {
alert(’Strona jest załadowana’);
});
|
Edytuj w JSFiddle
.