jQuery - Quais são as diferenças entre $ (document) .ready e $ (window) .load?

Quais são as diferenças entre

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

e

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

E quero ter certeza de que:

$(document).ready(function(){

}) 

e

$(function(){

}); 

e

jQuery(document).ready(function(){

});

são os mesmos.

Você pode me dizer que diferenças e semelhanças entre eles?

$(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>

Versão da consulta 3.0

Alterações recentes: .load (), .unload () e .error () removidos

Esses métodos são atalhos para operações de eventos, mas tinham várias limitações de API. O .load()método de evento entrou em conflito com o .load() método ajax . O .error()método não pode ser utilizado com window.onerror por causa da maneira como o método DOM é definido. Se você precisar anexar eventos por esses nomes, use o .on()método, por exemplo, mude $("img").load(fn)para $(img).on("load", fn). ¹

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

Deve ser alterado para

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

Estes são todos equivalentes:

$(function(){
}); 

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

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

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

document.readyé um evento jQuery, é executado quando o DOM está pronto, por exemplo, todos os elementos existem para serem encontrados / usados, mas não necessariamente todo o conteúdo.
window.onloaddispara mais tarde (ou ao mesmo tempo nos piores / com falha) quando as imagens são carregadas. Portanto, se você estiver usando dimensões de imagem, por exemplo, geralmente deseja usá-lo.

Leia também uma pergunta relacionada:
Diferença entre as funções $ (window) .load () e $ (document) .ready ()

No documento da API jQuery

Enquanto o JavaScript fornece o loadevento para a execução do código quando uma página é renderizada, esse evento não é acionado até que todos os ativos, como imagens, tenham sido completamente recebidos. Na maioria dos casos, o script pode ser executado assim que a hierarquia do DOM for totalmente construída. O manipulador passado para .ready()é garantido para ser executado depois que o DOM estiver pronto; portanto, este é geralmente o melhor lugar para conectar todos os outros manipuladores de eventos e executar outro código jQuery. Ao usar scripts que dependem do valor das propriedades de estilo CSS, é importante fazer referência a folhas de estilo externas ou incorporar elementos de estilo antes de fazer referência aos scripts.

Nos casos em que o código depende de ativos carregados (por exemplo, se as dimensões de uma imagem são necessárias), o código deve ser colocado em um manipulador para o loadevento.

Resposta à segunda pergunta -

Não, eles são idênticos desde que você não esteja usando o jQuery no modo sem conflito.

Essas três funções são iguais.

$(document).ready(function(){

}) 

e

$(function(){

}); 

e

jQuery(document).ready(function(){

});

aqui $é usado para definir jQuerycomo $= jQuery.

Agora a diferença é que

$(document).readyé um evento jQuery que é disparado quando DOMcarregado, portanto, quando a estrutura do documento está pronta.

$(window).load o evento é acionado depois que todo o conteúdo é carregado, como a página contém imagens, css etc.

A diferença entre $(document).ready()e $(window).load()funções é que o código incluído $(window).load()será executado assim que a página inteira (imagens, iframes, folhas de estilo, etc.) for carregada, enquanto o evento ready do documento é acionado antes que todas as imagens, iframes etc. sejam carregadas, mas depois do próprio DOM inteiro está pronto.

$(document).ready(function(){

}) 

e

$(function(){

});

e

jQuery(document).ready(function(){

});

Não há diferença entre os três códigos acima.

Eles são equivalentes, mas você pode enfrentar conflito se qualquer outra estrutura JavaScript usar o mesmo símbolo de dólar $ como nome do atalho.

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

O evento ready é sempre executado na única página html carregada no navegador e as funções são executadas .... Mas o evento load é executado no momento em que todo o conteúdo da página é carregado no navegador para a página ... .. podemos usar $ ou jQuery quando usamos o método noconflict () nos 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 é um evento que é acionado quando o DOM e todo o conteúdo (tudo) na página são totalmente carregados, como CSS, imagens e quadros. Um melhor exemplo é se queremos obter o tamanho real da imagem ou obter os detalhes de qualquer coisa que a usamos.

$ (document) .ready () indica que o código nele precisa ser executado assim que o DOM for carregado e pronto para ser manipulado pelo script. Não vai esperar o carregamento das imagens para executar o 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 disparado após o $ (document) .ready ().

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

Acima de 3 são iguais, $ é o nome alternativo de jQuery, você pode enfrentar conflitos se qualquer outra estrutura do JavaScript usar o mesmo símbolo de dólar $. Se você enfrentar conflitos, a equipe jQuery fornecerá uma solução sem conflitos, leia mais.

$ (window) .load foi descontinuado no 1.8 e removido no jquery 3.0