carga de la ventana dentro de un documento listo?

Question

Disculpe si esto se ha respondido antes, pero todas las búsquedas hablan sobre las diferencias, no sobre el uso de las dos juntas, si es posible.

Simplemente, ¿se puede usar $(window).load.(function() {}) DENTRO de $(document).ready.(function() {})?

Tengo algunas cosas que se deben hacer después de cargar el DOM pero luego quiero revelar ciertos elementos solo después de que las imágenes hayan terminado de cargarse. Lo único que funciona en Explorer 8 es poner las funciones $(window).load dentro del $(document).ready con todo lo demás.

¿Es esta una práctica aceptable?

Solo quiero utilizar el método más aceptable para revelar un DIV que contiene imágenes pequeñas, como una barra de herramientas, una vez que está completamente construido. (visibilityhidden versus displaynone, por ejemplo). El código HTML para este DIV está escrito por el código dentro de $(document).ready y luego se agrega al cuerpo usando $('body').append() antes de usar $(window).load.

Estoy teniendo muchos problemas con Explorer 8.

Answer 1

Esto funciona muy bien y es una práctica aceptable. Después de todo, como usted describe, puede haber casos donde la lógica en el controlador $(window).load() depende del trabajo que se realiza después de que el DOM esté listo. Si la ventana ya está cargada para cuando configuró $(window).load(), el controlador se activará inmediatamente.

Answer 2

EDIT:

NOTA: Esta respuesta sólo es aplicable a jQuery v2 y por debajo.

---

jQuery .ready() event:

El controlador pasa a .ready() es garantizada para ser ejecutado después de que el DOM está listo, por lo que este suele ser el mejor lugar para unir todo otro evento manipuladores y ejecuta otro código jQuery.

jQuery .load() event method:

El evento load se envía a un elemento cuando y todos los sub-elementos han ha cargado completamente. Este evento se puede enviar a cualquier elemento asociado a una URL: imágenes, scripts, marcos, iframes y el objeto de ventana .

Sobre la base de la documentación de jQuery arriba, no he visto nada que pudiera indicar algún problema con lo siguiente:

$(document).ready(function() { 
    // will fire IMMEDIATELY after the DOM is constructed 

    $(window).load(function() { 
     // will only fire AFTER all pages assets have loaded 
    }) 

}); 

La colocación de un .load en el interior de un ready simplemente garantiza que el DOM está listo cada vez que el load está activado.

Es posible que desee colocar todos código jQuery dentro de un único controlador listo para DOM, y aún así puede tener un subconjunto de código jQuery que requiera que todas las imágenes se carguen primero. Esta disposición garantiza que todo el código se active una vez en DOM listo y el resto se activará posteriormente cada vez que los elementos de la página hayan terminado de cargarse.

Esto en última instancia, puede ser más un problema de preferencia personal, sin embargo, el OP estaba preguntando claramente si esta disposición podría causar problemas. Esto no ha probado ser cierto.

Answer 3

ADVERTENCIA: Las respuestas en esta pregunta son bastante obsoletas.

Como @ViRuSTriNiTy mencionó en los comentarios que este código ya no es válido en jQuery 3 y se mencionó como un problema en GitHub.

Ya no se aconseja este método.

Una forma de hacerlo es utilizar el siguiente código

$(window).on("load", function(){ 
    $.ready.then(function(){ 
     // Both ready and loaded 
    }); 
}) 

Sin embargo, este código no funcionará si carga las imágenes de listo y quiere llamar a un código después de que esté completamente cargado.

Answer 4

Me encontré con este problema recientemente ... desde jQuery versión 3, ya no podemos poner $ (ventana) .on ('cargar') dentro de document.ready() ... porque se llama manejador listo asincrónicamente, lo que significa que se puede llamar listo después de la carga.

De equipo jQuery Core: Github: jQuery 3 issues

Para que quede claro, entendemos lo que está causando esto. Recientemente hemos preparado los controladores que se activan de forma asíncrona. Esto tiene ventajas que son difíciles de dejar . La desventaja es que el controlador listo a veces puede disparar después del evento de carga si el evento de carga se dispara con la suficiente rapidez. El efecto lateral que está viendo en este problema es que está vinculando un controlador de evento de carga después de que el evento de carga ya se haya disparado.

La solución es atar la carga fuera de listo.

Esto es cómo debería llamarse los dos métodos:

$(function() { 
    // Things that need to happen when the document is ready 
}); 

$(window).on("load", function() { 
    // Things that need to happen after full load 
});