Devo usar window.onload ou bloco de script?

Question

Tenho uma função javascript que manipula o DOM quando ele é chamado (adiciona classes CSS, etc).Isto é invocado quando o usuário altera alguns valores em um formulário.Quando o documento for carregado pela primeira vez, quero invocar esta função para preparar o estado inicial (que é mais simples neste caso do que configurar o DOM do lado do servidor para o estado inicial correto).

É melhor usar window.onload para fazer essa funcionalidade ou ter um bloco de script após os elementos DOM que preciso modificar?Em ambos os casos, por que é melhor?

Por exemplo:

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

devo invocá-lo via:

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

ou:

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

A primeira parece ser a maneira padrão de fazer isso, mas a última parece ser igualmente boa, talvez melhor, pois atualizará o elemento assim que o script for atingido e, desde que seja colocado após o elemento, eu não vejo problema nisso.

Alguma ideia?Uma versão é realmente melhor que a outra?

Answer 1

Definitivamente uso onload.Mantenha seus scripts separados de sua página, ou você ficará louco tentando desemaranhá-los mais tarde.

Answer 2

O evento onload é considerado a maneira correta de fazer isso, mas se você não se importa em usar uma biblioteca javascript, $(document).ready() do jQuery é ainda melhor.

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

As vantagens são:

1. Chame $(document).ready() quantas vezes desejar para registrar código adicional para execução - você só pode definir window.onload uma vez.
2. As ações $(document).ready() acontecem assim que o DOM é concluído - window.onload tem que esperar por imagens e coisas assim.

Espero não estar me tornando o cara que sugere jQuery em todas as perguntas sobre JavaScript, mas é realmente ótimo.

Answer 3

Eu escrevi muito Javascript e window.onload é um Terrível maneira de fazer isso.É frágil e espera até todo o ativo da página foi carregado.Portanto, se uma imagem demorar uma eternidade ou um recurso não atingir o tempo limite até 30 segundos, seu código não será executado antes que o usuário possa ver/manipular a página.

Além disso, se outro pedaço de Javascript decidir usar window.onload = function() {}, seu código ficará surpreso.

A maneira correta de executar seu código quando a página estiver pronta é aguardar até que o elemento que você precisa alterar esteja pronto/disponível.Muitas bibliotecas JS possuem essa funcionalidade integrada.

Confira:

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

Answer 4

Algumas estruturas JavaScript, como mootools, dá acesso a um evento especial chamado "domready":

Contém o evento de janela 'domready', que será executado quando o DOM for carregado.Para garantir que os elementos DOM existam quando o código que tenta acessá-los for executado, eles devem ser colocados no evento 'domready'.

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

Answer 5

window.onload no IE aguarda o carregamento das informações binárias também.Não é uma definição estrita de "quando o DOM é carregado".Portanto, pode haver um atraso significativo entre o momento em que a página é carregada e o momento em que o script é acionado.Por causa disso, eu recomendaria procurar uma das estruturas JS abundantes (protótipo/jQuery) para lidar com o trabalho pesado para você.

Answer 6

Aqui está um artigo muito bom sobre esse assunto:

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

Answer 7

@O geek

Tenho certeza de que window.onload será chamado novamente quando um usuário clicar no botão Voltar no IE, mas não será chamado novamente no Firefox.(A menos que eles tenham mudado recentemente).

No Firefox, onload é chamado quando o DOM termina de carregar, independentemente de como você navegou para uma página.

Answer 8

Embora eu concorde com os outros sobre o uso de window.onload, se possível, para código limpo, tenho certeza de que window.onload será chamado novamente quando um usuário clicar no botão Voltar no IE, mas não será chamado novamente no Firefox.(A menos que eles tenham mudado recentemente).

Editar:Eu poderia ter isso ao contrário.

Em alguns casos, é necessário usar script in-line quando você deseja que seu script seja avaliado quando o usuário clicar no botão Voltar de outra página, de volta à sua página.

Quaisquer correções ou acréscimos a esta resposta são bem-vindos ...Não sou um especialista em javascript.

Answer 9

Minha opinião é a primeira porque você só pode ter 1 função window.onload, enquanto o script inline bloqueia você tem um n número.

Answer 10

onLoad porque é muito mais fácil saber qual código é executado quando a página é carregada do que ter que ler montes de html em busca de tags de script que possam ser executadas.