JavaScript onload (Italiano)

Riepilogo: in questo tutorial imparerai come gestire l’evento load che si attiva sul documento, sull’immagine e sugli elementi dello script in JavaScript.

L’evento di caricamento della finestra

Per l’oggetto window, l’evento load viene generato quando il l’intera pagina web (HTML) è stata caricata completamente, comprese tutte le risorse dipendenti come file JavaScript, file CSS e immagini.

Per gestire l’evento load, devi registrarti un listener di eventi che utilizza il metodo addEventListener():

Code language: JavaScript (javascript)

Oppure utilizza onload proprietà dell’oggetto window:

Code language: JavaScript (javascript)

Se gestisci un sistema precedente, potresti scoprire che il load gestore di eventi è registrato nell’elemento body del documento HTML, in questo modo:

È buona norma utilizzare addEventListener() per assegnare il onload gestore di eventi quando possibile.

L’evento di caricamento dell’immagine

Il load si verifica anche sulle immagini. Per gestire l’evento load sulle immagini, puoi utilizzare il metodo addEventListener() degli elementi dell’immagine.

Il seguente esempio utilizza il gestore di eventi load per determinare se un’immagine, che esiste nell’albero DOM, è stata completamente caricata:

Puoi assegnare un onload gestore di eventi utilizzando direttamente l’attributo onload dell’elemento <img>, in questo modo:

Code language: HTML, XML (xml)

Se crei un elemento immagine in modo dinamico, puoi assegnare un onload gestore di eventi prima di impostare src come segue:

Come funziona:

  • Innanzitutto, crea un elemento immagine dopo che il documento è stato completamente caricato inserendo il codice all’interno del gestore di eventi dell’evento di caricamento della finestra.
  • Secondo, quindi assegna il onload gestore di eventi all’immagine.
  • Terzo, aggiungi l’immagine al documento.
  • Infine, assegna un URL di immagine all’attributo src. L’immagine verrà scaricata nell’elemento non appena viene impostata la proprietà src.

L’evento di caricamento dello script

<script> supporta anche l’evento load leggermente diverso dai modi standard.

L’evento load dello script ti consente per verificare se un file JavaScript è stato completamente caricato.

A differenza delle immagini, il browser web inizia a scaricare i file JavaScript solo dopo che la proprietà src è stata assegnata e la L’elemento <script> è stato aggiunto al documento.

Il codice seguente carica il file app.js dopo che la pagina è stata completamente caricato. Assegna un onload gestore di eventi per controllare se app.js è stato completamente caricato.

Riepilogo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *