In questo post, vedremo come eseguire codice JavaScript dopo il caricamento della pagina usando JS puro e jQuery.
JavaScript e la libreria jQuery offrono diversi modi per eseguire una funzione dopo che il DOM è pronto. Questo post fornisce una panoramica dettagliata dei metodi per realizzare ciò.
JavaScript
In JavaScript puro, il metodo standard per rilevare una pagina completamente caricata è usare la proprietà del gestore dell’evento onload. L’evento load indica che tutte le risorse della pagina web sono state caricate. Questo può essere chiamato con il window.onloadin JavaScript.
|
1
2
3
|
window.onload = function() {
alert(‘La pagina è caricata’);
};
|
Modifica in JSFiddle
Il codice seguente usa il metodo addEventListener() per ascoltare l’evento load per rilevare una pagina completamente caricata. Questo è equivalente al codice precedente.
|
1
2
3
|
window.addEventListener(“load”, function() {
alert(‘La pagina è caricata’);
});
|
Modifica in JSFiddle
Anche se non è consigliato, puoi anche chiamare una funzione JavaScript al caricamento della pagina usando il tag HTML <body>. L’idea è di usare l’attributo onload nel tag body.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=”loaded();” ></body>
<script>
function loaded() {
alert(‘La pagina è caricata’);
}
</script>
</html>
|
Modifica in JSFiddle
Nota, che l’evento DOMContentLoaded sarebbe più appropriato se hai solo bisogno che il tuo codice venga eseguito quando il DOM è completamente caricato, senza aspettare che fogli di stile e immagini finiscano il caricamento.
|
1
2
3
|
document.addEventListener(“DOMContentLoaded”, function() {
alert(‘La pagina è caricata’);
});
|
Modifica in JSFiddle
jQuery
Con jQuery, puoi eseguire codice JavaScript non appena il DOM è completamente caricato usando il metodo .ready() che è equivalente a window.onload in JavaScript. Si può usare una qualsiasi delle seguenti sintassi, che sono tutte uguali:
- $(document).ready(handler)
- $(“document”).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘La pagina è caricata’);
});
|
Modifica in JSFiddle
Alternativamente, $(handler) può essere chiamato che è equivalente alla sintassi sopra:
|
1
2
3
|
$(function() {
alert(‘Page is loaded’);
});
|
Modifica in JSFiddle
Puoi anche osservare l’evento load sull’oggetto window usando il metodo $(window).on("load", handler).
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘La pagina è caricata’);
});
|
Modifica in JSFiddle