body - jQuery: ¿Cuáles son las diferencias entre $(document).ready y $(window).load?

jquery events

Question

¿Cuáles son las diferencias entre

$(document).ready(function(){
 //my code here
});

y

$(window).load(function(){
  //my code here
});

Y quiero asegurarme de que:

$(document).ready(function(){

}) 

y

$(function(){

}); 

y

jQuery(document).ready(function(){

});

son lo mismo.

¿Puedes decirme qué diferencias y similitudes hay entre ellos?

Answer 1

$ (window) .load es un evento que se activa cuando el DOM y todo el contenido (todo) en la página está completamente cargado, como CSS, imágenes y marcos. Un mejor ejemplo es si queremos obtener el tamaño de imagen real o para obtener los detalles de cualquier cosa que usemos.

$ (document) .ready () indica que el código debe ejecutarse una vez que el DOM se haya cargado y esté listo para ser manipulado por el script. No esperará a que se carguen las imágenes para ejecutar el script jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (window) .load se disparó después de $ (document) .ready ().

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Más de 3 son iguales, $ es el nombre de alias de jQuery, puede que tenga problemas si cualquier otro Framework de JavaScript usa el mismo símbolo $. Si se enfrenta a un conflicto, el equipo de jQuery proporciona una solución no-conflict Lea más.

$ (window) .load fue desaprobado en 1.8 y eliminado en jquery 3.0

Answer 2

Desde el documento jQuery API

Si bien JavaScript proporciona el evento de load para ejecutar código cuando se representa una página, este evento no se activa hasta que todos los activos, como las imágenes, se hayan recibido por completo. En la mayoría de los casos, la secuencia de comandos se puede ejecutar tan pronto como la jerarquía DOM se haya construido completamente. Se garantiza que el controlador pasado a .ready() se ejecutará después de que el DOM esté listo, por lo que este suele ser el mejor lugar para adjuntar todos los demás controladores de eventos y ejecutar otro código jQuery. Cuando se utilizan scripts que se basan en el valor de las propiedades de estilo CSS, es importante hacer referencia a hojas de estilo externas o incrustar elementos de estilo antes de hacer referencia a los scripts.

En los casos en que el código se basa en activos cargados (por ejemplo, si se requieren las dimensiones de una imagen), el código debe colocarse en un controlador para el evento de load .

Responde a la segunda pregunta -

No, son idénticos siempre y cuando no estés usando jQuery en modo sin conflicto.

Answer 3

El evento Ready se produce después de que se haya cargado el documento HTML, mientras que el evento onload se produce más tarde, cuando todo el contenido (por ejemplo, imágenes) también se ha cargado.

El evento onload es un evento estándar en el DOM, mientras que el evento ready es específico de jQuery. El propósito del evento listo es que debe ocurrir lo antes posible después de que el documento se haya cargado, de modo que el código que agrega funcionalidad a los elementos de la página no tenga que esperar a que se cargue todo el contenido.

Answer 4

El evento listo siempre se ejecuta en la única página html que se carga en el navegador y las funciones se ejecutan ... Pero el evento de carga se ejecuta en el momento en que todos los contenidos de la página se cargan en el navegador de la página ... .. podemos usar $ o jQuery cuando usamos el método noconflict () en los scripts jquery ...

Answer 5

Estas tres funciones son las mismas.

$(document).ready(function(){

}) 

y

$(function(){

}); 

y

jQuery(document).ready(function(){

});

Aquí $ se usa para definir jQuery como $ = jQuery .

Ahora la diferencia es que

$(document).ready es un evento jQuery que se activa cuando se carga DOM , por lo que se activa cuando la estructura del documento está lista.

$(window).load evento $(window).load se $(window).load después de cargar todo el contenido, como la página contiene imágenes, css, etc.

Answer 6

La diferencia entre las funciones $(document).ready() y $(window).load() es que el código incluido dentro de $(window).load() se ejecutará una vez que la página completa (imágenes, marcos, hojas de estilo, etc.) se cargan mientras que el evento de documento listo se dispara antes de que se carguen todas las imágenes, iframes, etc., pero después de que todo el DOM esté listo.

$(document).ready(function(){

}) 

y

$(function(){

});

y

jQuery(document).ready(function(){

});

No hay diferencia entre los 3 códigos anteriores.

Son equivalentes, pero puede enfrentar un conflicto si cualquier otro Framework de JavaScript usa el mismo símbolo de dólar $ como nombre de acceso directo.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Creo que deberías mirar este artículo: 6 Tipos diferentes de $ (documento) .ready () Ejemplos

Answer 7

document.ready es un evento jQuery, se ejecuta cuando el DOM está listo, por ejemplo, todos los elementos están para ser encontrados, pero no necesariamente todo el contenido.
window.onload dispara más tarde (o al mismo tiempo en el peor de los casos) cuando se cargan las imágenes. Por lo tanto, si está utilizando las dimensiones de la imagen, por ejemplo, a menudo desea usar esto en su lugar.

También lea una pregunta relacionada:
Diferencia entre las funciones $ (window) .load () y $ (document) .ready ()

Answer 8

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Query 3.0 version

Cambio de ruptura: .load (), .unload () y .error () eliminados

Estos métodos son accesos directos para operaciones de eventos, pero tenían varias limitaciones de API. El .load() evento .load() entró en conflicto con el método ajax .load() . El método .error() no se pudo usar con window.onerror debido a la forma en que se define el método DOM. Si necesita adjuntar eventos con estos nombres, use el método .on() , por ejemplo, cambie $("img").load(fn) $(img).on("load", fn) $("img").load(fn) a $(img).on("load", fn) . ¹

$(window).load(function() {});

Debe ser cambiado a

$(window).on(''load'', function (e) {})

Estos son todos equivalentes:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on(''ready'', function(){
})

Answer 9

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});