Quando utilizzare "window.onload"?

In JavaScript, quando voglio eseguire uno script una volta caricata la pagina, dovrei usare lo window.onload o semplicemente scrivere lo script?Quando utilizzare "window.onload"?

Per esempio, se voglio avere una finestra pop-up, dovrei scrivere (direttamente all'interno del tag <script>):

alert("hello!");

Oppure:

window.onload = function() { 
    alert("hello!"); 
}

Entrambi sembrano funzionare subito dopo la pagina è caricata. Qual è la differenza?

fonte

2013-11-24 Lambda Ninja

Il primo si avvia appena il browser arriva.

Il secondo attende che la finestra venga caricata prima di eseguirla.

In generale si dovrebbe fare il secondo, ma è necessario collegare un listener di eventi ad esso anziché definire la funzione. Ad esempio:

window.addEventListener('load', 
    function() { 
    alert('hello!'); 
    }, false);

fonte

2013-11-24 20:03:30

Dipende da se si desidera che venga eseguito quando si incontra l'elemento di script o se si desidera che venga eseguito quando si attiva l'evento di caricamento (che è dopo che è stato caricato l'intero documento (compresi oggetti come immagini).

Né ha sempre ragione.

In generale, tuttavia, evitare di assegnare le funzioni direttamente a onload in favore dell'utilizzo di addEventListener (con librerie di compatibilità se è necessario supportare i browser meno recenti).

fonte

2013-11-24 20:02:58 Quentin

Ecco lo documentation on MDN.

Secondo esso:

Il carico generato l'evento al termine del processo di caricamento documento. A questo punto, tutti gli oggetti nel documento si trovano nel DOM e tutte le immagini e le sottoquadrature hanno completato il caricamento.

Il tuo primo snippet di codice verrà eseguito non appena il browser raggiunge questo punto in formato HTML.

Il secondo frammento attiverà il popup quando il DOM e tutte le immagini sono completamente caricate (vedere le specifiche).

Considerando la funzione alert(), non importa in quale punto verrà eseguito (non dipende da nulla oltre all'oggetto window). Ma se vuoi manipolare il DOM - devi assolutamente aspettare che si carichi correttamente.

fonte

2013-11-24 20:05:10

@xgqfrms [jQuery non è sempre la risposta] (http://meta.stackoverflow.com/questions/335328/when-is-use-jquery-not-a-valid-answer-to- a-javascript-question) ... –

Il motivo per cui si aspetta il caricamento del DOM è che è possibile scegliere come target qualsiasi elemento che viene caricato dopo lo script. Se stai solo creando uno alert, non importa. Diciamo, comunque, che avevi come target un div che era nel tuo markup dopo il tuo script, riceverai un errore se non aspetti che quel pezzo dell'albero DOM venga caricato.

document.ready è un'ottima alternativa a window.onload se si utilizza jQuery.

Vedi qui: window.onload vs $(document).ready()

fonte

2013-11-24 20:05:38 SeeMeCode

esistono tre alternative:

direttamente all'interno del tag script viene eseguito non appena viene analizzato.
All'interno di document.addEventListener("DOMContentLoaded", function(){}); verrà eseguito una volta che il DOM è pronto.
All'interno di window.onload function(){}) verrà eseguito non appena tutte le risorse della pagina vengono caricate.

fonte

2013-11-24 20:06:09 Henrik

Le altre risposte tutti sembrano non aggiornati

Prima di tutto, mettendo gli script in alto e con window.onload è un anti-modello. È rimasto da IE giorni nella migliore delle ipotesi o errato intendimento di JavaScript e il browser nel peggiore dei casi.

Si può solo spostare i vostri script la parte inferiore del vostro html

<html> 
    <head> 
    <title>My Page</title> 
    </head> 
    <body> 
    content 
    </body> 
    <script src="some-external.js"></script> 
    <script> 
    some in page code 
    </script> 
</html>

L'unica ragione per cui la gente ha usato window.onload è perché gli script necessari per andare nella sezione head erroneamente creduto. Poiché le cose sono eseguite in ordine se il tuo script era nella sezione head, il corpo e il tuo contenuto non esistevano ancora per definizione di eseguito nell'ordine.

La soluzione hacky era quella di utilizzare window.onload per attendere il caricamento del resto della pagina. Spostando verso il basso lo script ha risolto anche questo problema e ora non è necessario utilizzare window.onload poiché il corpo e il contenuto saranno già stati caricati.

La soluzione più moderna consiste nell'utilizzare il tag defer sugli script ma per utilizzare che gli script devono essere tutti esterni.

<head> 
    <script src="some-external.js" defer></script> 
    <script src="some-other-external.js" defer></script> 
</head>

Questo ha il vantaggio che il browser inizierà a scaricare immediatamente gli script e li eseguirà nell'ordine specificato ma sarà l'ora di eseguirli fino a dopo che la pagina è caricata, senza bisogno di window.onload o in meglio ma ancora non necessario window.addEventListener('load', ...

fonte

2018-01-15 02:20:27 gman

Wow, questa domanda è vecchia! Grazie per il suggerimento su "differire". L'ho visto ma non ho mai capito cosa significasse. –

sì, è il primo risultato quando si parla di quando usare 'window.onload', quindi sembrava che ci fosse bisogno di una risposta aggiornata – gman

Quando utilizzare "window.onload"?

risposta

Problemi correlati