În această postare, vom vedea cum se execută codul JavaScript după încărcarea paginii folosind JS pur și jQuery.
Librăria JavaScript și jQuery oferă mai multe moduri de a executa o funcție după ce DOM-ul este gata. Această postare oferă o prezentare detaliată a metodelor pentru a realiza acest lucru.
JavaScript
În JavaScript pur, metoda standard pentru a detecta o pagină complet încărcată este utilizarea proprietății onload event handler. Evenimentul load indică faptul că toate activele de pe pagina web au fost încărcate. Acesta poate fi apelat cu window.onload în JavaScript.
|
1
2
3
|
window.onload = function() {
alert(‘Pagina este încărcată’);
};
|
Edit in JSFiddle
Codul următor utilizează metoda addEventListener() pentru a asculta evenimentul load pentru a detecta o pagină complet încărcată. Acest lucru este echivalent cu codul de mai sus.
|
1
2
3
|
window.addEventListener(„load”, function() {
alert(‘Pagina este încărcată’);
});
|
Edit in JSFiddle
Deși nu este recomandat, puteți, de asemenea, să apelați o funcție JavaScript la încărcarea paginii folosind tag-ul HTML <body>. Ideea este de a utiliza atributul onload în tag-ul body.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();”></body>
<script>
function loaded() {
alert(‘Pagina este încărcată’);
}
</script>
</html>
|
Edit in JSFiddle
Rețineți că evenimentul DOMContentLoaded ar fi mai potrivit dacă aveți nevoie doar ca codul dvs. să ruleze atunci când DOM-ul este complet încărcat, fără a aștepta ca foile de stil și imaginile să termine de încărcat.
|
1
2
3
|
document.addEventListener(„DOMContentLoaded”, function() {
alert(‘Pagina este încărcată’);
});
|
Edit in JSFiddle
jQuery
Cu jQuery, puteți rula codul JavaScript de îndată ce DOM este complet încărcat folosind metoda .ready() care este echivalentă cu window.onload în JavaScript. Se poate folosi oricare dintre următoarele sintaxe, care sunt toate identice:
- $(document).ready(handler)
- $(„document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘Pagina este încărcată’);
});
|
Edit in JSFiddle
Alternativ, se poate apela $(handler) care este echivalent cu sintaxa de mai sus:
|
1
2
3
|
$(function() {
alert(‘Page is loaded’);
});
|
Edit in JSFiddle
De asemenea, puteți urmări evenimentul load pe obiectul window folosind metoda $(window).on("load", handler).
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘Pagina este încărcată’);
});
|
Edit in JSFiddle
.