¿Debo usar window.onload o script block?

Question

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

¿Es mejor usar window.onload para realizar 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 invocarlo a través de:

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

o:

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

La primera parece ser la forma estándar de hacerlo, pero la segunda parece ser igual de buena, tal vez mejor, ya que actualizará el elemento tan pronto como se ejecute el script, y siempre que se coloque después del elemento, yo No veo ningún problema con eso.

¿Alguna idea?¿Es realmente una versión mejor que la otra?

Answer 1

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

Answer 2

El evento onload se considera la forma correcta de hacerlo, pero si no le importa usar una biblioteca javascript, $(document).ready() de jQuery es aún mejor.

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

Las ventajas son:

1. Llame a $(document).ready() tantas veces como desee para registrar código adicional para ejecutar; solo puede configurar window.onload una vez.
2. Las acciones $(document).ready() ocurren tan pronto como se completa el DOM: window.onload tiene que esperar imágenes y demás.

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

Answer 3

He escrito mucho Javascript y window.onload es un horrible manera de hacerlo.Es quebradizo y espera hasta cada El activo de la página se ha cargado.Entonces, si una imagen tarda una eternidad o un recurso no caduca 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 quedará impresionado.

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

Verificar:

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

Answer 4

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

Contiene el evento de ventana 'domready', que se ejecutará cuando se haya cargado el DOM.Para garantizar que los elementos DOM existan 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 5

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

Answer 6

Aquí hay un muy buen artículo sobre este tema:

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

Answer 7

@El friki

Estoy bastante seguro de que se volverá a llamar a window.onload cuando un usuario presione el botón Atrás en IE, pero no se volverá a llamar en Firefox.(A menos que lo hayan cambiado recientemente).

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

Answer 8

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

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

En algunos casos, es necesario utilizar un script en línea cuando desea que su script se evalúe cuando el usuario presione el botón Atrás desde otra página, para regresar a su página.

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

Answer 9

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

Answer 10

onLoad porque es mucho más fácil saber qué código se ejecuta cuando se carga la página que tener que leer montones de html en busca de etiquetas de script que puedan ejecutarse.