Dovrei usare window.onload o script block?

Question

Ho una funzione javascript che manipola il DOM quando viene chiamato (aggiunge classi CSS, ecc.).Viene invocato quando l'utente modifica alcuni valori in un modulo.Quando il documento viene caricato per la prima volta, voglio invocare questa funzione per preparare lo stato iniziale (che in questo caso è più semplice che impostare il DOM dal lato server allo stato iniziale corretto).

È meglio usare window.onload per eseguire questa funzionalità o avere un blocco di script dopo gli elementi DOM che devo modificare?In entrambi i casi, perché è meglio?

Per esempio:

function updateDOM(id) {
    // updates the id element based on form state
}

dovrei invocarlo tramite:

window.onload = function() { updateDOM("myElement"); };

O:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

Il primo sembra essere il modo standard per farlo, ma il secondo sembra essere altrettanto buono, forse migliore poiché aggiornerà l'elemento non appena viene eseguito lo script e finché viene posizionato dopo l'elemento, io non vedo alcun problema con esso.

qualche idea?Una versione è davvero migliore dell'altra?

Answer 1

Sicuramente usare onload.Mantieni i tuoi script separati dalla tua pagina, altrimenti diventerai matto cercando di districarli in seguito.

Answer 2

L'evento onload è considerato il modo corretto per farlo, ma se non ti dispiace usare una libreria javascript, $(document).ready() di jQuery è ancora migliore.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

I vantaggi sono:

1. Chiama $(document).ready() tutte le volte che vuoi per registrare codice aggiuntivo da eseguire: puoi impostare window.onload solo una volta.
2. Le azioni $(document).ready() si verificano non appena il DOM è completo: window.onload deve attendere immagini e simili.

Spero di non diventare il ragazzo che suggerisce jQuery su ogni domanda JavaScript, ma è davvero fantastico.

Answer 3

Ho scritto molti Javascript e window.onload è un file terribile modo per farlo.È fragile e aspetta fino a quando ogni la risorsa della pagina è stata caricata.Pertanto, se un'immagine impiega un'eternità o una risorsa non scade prima di 30 secondi, il codice non verrà eseguito prima che l'utente possa vedere/manipolare la pagina.

Inoltre, se un altro pezzo di Javascript decide di utilizzare window.onload = function() {}, il tuo codice verrà spazzato via.

Il modo corretto per eseguire il codice quando la pagina è pronta è attendere che l'elemento che devi modificare sia pronto/disponibile.Molte librerie JS hanno questa funzionalità integrata.

Guardare:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 4

Alcuni framework JavaScript, come mootools, ti dà accesso a un evento speciale chiamato "domready":

Contiene la finestra Evento 'domready', che verrà eseguita una volta caricato il DOM.Per garantire che gli elementi DOM esistano quando viene eseguito il codice che tenta di accedervi, dovrebbero essere inseriti nell'evento 'domready'.

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

window.onload su IE attende anche il caricamento delle informazioni binarie.Non è una definizione rigorosa di "quando il DOM viene caricato".Pertanto può esserci un ritardo significativo tra il momento in cui viene percepito il caricamento della pagina e il momento in cui lo script viene attivato.Per questo motivo, consiglierei di esaminare uno dei numerosi framework JS (prototipo/jQuery) per gestire il lavoro pesante per te.

Answer 6

Ecco un ottimo articolo su questo argomento:

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

@Il geek

Sono abbastanza sicuro che window.onload verrà richiamato nuovamente quando un utente preme il pulsante Indietro in IE, ma non verrà richiamato nuovamente in Firefox.(A meno che non lo abbiano cambiato di recente).

In Firefox, onload viene chiamato quando il DOM ha terminato il caricamento indipendentemente da come hai navigato in una pagina.

Answer 8

Anche se sono d'accordo con gli altri sull'utilizzo di window.onload, se possibile, per un codice pulito, sono abbastanza sicuro che window.onload verrà richiamato nuovamente quando un utente preme il pulsante Indietro in IE, ma non verrà richiamato nuovamente in Firefox.(A meno che non lo abbiano cambiato di recente).

Modificare:Potrei averlo al contrario.

In alcuni casi, è necessario utilizzare lo script inline quando si desidera che lo script venga valutato quando l'utente preme il pulsante Indietro da un'altra pagina, tornando alla tua pagina.

Eventuali correzioni o aggiunte a questa risposta sono benvenute...Non sono un esperto di Javascript.

Answer 9

La mia opinione è la prima perché puoi avere solo 1 funzione window.onload, mentre per i blocchi di script inline hai una N numero.

Answer 10

onLoad perché è molto più semplice sapere quale codice viene eseguito quando la pagina viene caricata piuttosto che dover leggere un sacco di codice HTML alla ricerca di tag di script che potrebbero essere eseguiti.