¿Debo usar window.onload o script block?

Question

Tengo una función de JavaScript que manipula el DOM cuando se llama (agrega clases de CSS, etc.). Esto se invoca cuando el usuario cambia algunos valores en un formulario. Cuando el documento se carga por primera vez, deseo invocar esta función para preparar el estado inicial (que es más simple en este caso que configurar el DOM desde el servidor al estado inicial correcto).

¿Es mejor usar window.onload para hacer esta funcionalidad o tener un bloque de script después de los elementos DOM que necesito modificar? En cualquier caso, ¿por qué es mejor?

Por ejemplo:

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

debo invocar a través de:

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

o:

El primero parece ser la forma estándar de hacerlo, pero la el último parece ser igual de bueno, quizás mejor ya que actualizará el elemento tan pronto como se accione el guión, y mientras esté colocado Después del elemento, no veo ningún problema con él.

¿Alguna idea? ¿Una versión es realmente mejor que la otra?

Answer 1

Definitivamente use onload. Mantenga sus scripts separados de su página, o se volverá loco tratando de desenredarlos más tarde.

Answer 2

Mi opinión es la primera porque solo puede tener 1 función window.onload, mientras que los bloques de script en línea tienen un número n.

Answer 3

onLoad porque es mucho más fácil decir qué código se ejecuta cuando se carga la página que tener que leer a través de los fragmentos de html que buscan las etiquetas de script que pueden ejecutarse.

Answer 4

Si bien estoy de acuerdo con los demás sobre el uso de window.onload si es posible para el código limpio, estoy bastante seguro de que se llamará a window.onload nuevamente cuando un usuario presione el botón Atrás en IE, pero no se llame de nuevo en Firefox. (A menos que lo hayan cambiado recientemente).

Editar: Podría tener eso al revés.

En algunos casos, es necesario utilizar una secuencia de comandos en línea cuando desee que su script se evalúe cuando el usuario presione el botón Atrás desde otra página, de regreso a su página.

Cualquier corrección o adición a esta respuesta es bienvenida ... No soy un experto en JavaScript.

Answer 5

@ El Geek

Estoy bastante seguro de que window.onload será llamado de nuevo cuando un usuario pulsa el botón Atrás en IE, pero no recibe un llamado de nuevo en Firefox. (A menos que lo hayan cambiado recientemente).

En Firefox, se llama a onload cuando el DOM ha terminado de cargarse independientemente de cómo haya navegado a una página.

Answer 6

Algunos marcos de JavaScript, como mootools, le dan acceso a un evento especial llamado "domready":

contiene el evento ventana 'domready', que se ejecutará cuando el DOM ha cargado. Para asegurarse de que los elementos DOM existen cuando se ejecuta el código que intenta acceder a ellos, deben colocarse dentro del evento 'domready'.

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

Answer 7

El proceso de carga se considera la forma correcta de hacerlo, pero si no les importa usar una biblioteca de Javascript, $ (document) de jQuery ready() es aún mejor.

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

Las ventajas son:

1. llamada $ (document) ready() tantas veces como desee registrar un código adicional para funcionar - sólo se puede establecer window.onload vez.
2. $ (document) .ready() las acciones suceden tan pronto como se completa el DOM - window.onload tiene que esperar para las imágenes y tal.

Espero no convertirme en el tipo que sugiere jQuery en cada pregunta de JavaScript, pero realmente es genial.

Answer 8

window.onload en IE espera a que la información binaria se cargue también. No es una definición estricta de "cuando el DOM está cargado". Por lo tanto, puede haber un desfase significativo entre el momento en que se percibe que se carga la página y el momento en que se inicia el guión. Debido a esto, recomendaría buscar en uno de los abundantes frameworks JS (prototype/jQuery) para manejar el trabajo pesado por usted.

Answer 9

He escrito un montón de Javascript y window.onload es terrible manera de hacerlo. Es frágil y espera hasta cada activo de la página cargada. Entonces, si una imagen tarda una eternidad o un recurso no excede el tiempo hasta 30 segundos, su código no se ejecutará antes de que el usuario pueda ver/manipular la página.

Además, si otra parte de Javascript decide usar window.onload = function() {}, su código será volado.

La forma correcta de ejecutar el código cuando la página está lista es esperar a que el elemento que necesita cambiar esté listo/disponible. Muchas bibliotecas JS tienen esto como funcionalidad incorporada.

Salida:

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

Answer 10

Aquí es un artículo muy bueno sobre este tema:

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