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

¿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.

¿Me puede decir qué diferencias y similitudes entre ellos?

$(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 versión

Cambio de última hora: .load (), .unload () y .error () eliminados

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

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

Debería cambiarse a

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

Todos estos son equivalentes:

$(function(){
}); 

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

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

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

document.readyes un evento jQuery, se ejecuta cuando el DOM está listo, por ejemplo, todos los elementos están ahí para ser encontrados / utilizados, pero no necesariamente todo el contenido.
window.onloadse dispara más tarde (o al mismo tiempo en el peor de los casos) cuando se cargan imágenes y demás. Entonces, si está utilizando dimensiones de imagen, por ejemplo, a menudo desea usar esto en su lugar.

Lea también una pregunta relacionada:
Diferencia entre las funciones $ (ventana) .load () y $ (document) .ready ()

Del documento jQuery API

Si bien JavaScript proporciona el loadevento para ejecutar código cuando se procesa 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, el script se puede ejecutar tan pronto como la jerarquía DOM se haya construido por completo. Se .ready()garantiza que el controlador pasado se ejecutará una vez 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 dependen del valor de las propiedades de estilo CSS, es importante hacer referencia a hojas de estilo externas o elementos de estilo incrustados 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 loadevento.

Respuesta a la segunda pregunta:

No, son idénticos siempre que no utilice jQuery en modo sin conflicto.

Estas tres funciones son las mismas.

$(document).ready(function(){

}) 

y

$(function(){

}); 

y

jQuery(document).ready(function(){

});

aquí $se usa para definir jQuerycomo $= jQuery.

Ahora la diferencia es que

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

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

La diferencia entre $(document).ready()y las $(window).load()funciones es que el código incluido en el interior $(window).load()se ejecutará una vez que se cargue toda la página (imágenes, iframes, hojas de estilo, etc.) mientras que el evento de documento listo se dispara antes de que se carguen todas las imágenes, iframes, etc., pero después de 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 conflictos si cualquier otro Frameworks 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
});

El evento listo siempre se ejecuta en la única página html cargada 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 para la página ... .. podemos usar $ o jQuery cuando usamos el método noconflict () en scripts jquery ...

$(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"); 
});

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

$ (document) .ready () indica que el código debe ejecutarse una vez que se carga el DOM 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>

$ (ventana) .load disparada después de $ (documento) .ready ().

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

Por encima de 3 son iguales, $ es el nombre de alias de jQuery, puede enfrentar conflictos si cualquier otro JavaScript Frameworks usa el mismo símbolo de dólar $. Si enfrenta conflictos, el equipo de jQuery proporciona una solución sin conflictos. Lea más.

$ (window) .load quedó en desuso en 1.8 y se eliminó en jquery 3.0