ti-enxame.com

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(){

}) 

$(function(){

}); 

jQuery(document).ready(function(){

});

são os mesmos.

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

288
hungneox

$(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 de consulta 3.0

Quebrando a mudança: .load (), .unload () e .error () removido

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

$(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(){
})
399
Oyeme

document.ready é um evento jQuery, é executado quando o DOM está pronto, por ex. todos os elementos estão lá para serem encontrados/usados, mas não necessariamente todo o conteúdo. 
window.onload é acionado mais tarde (ou ao mesmo tempo nos casos de pior/falha) quando as imagens e itens são carregados. Então, se você estiver usando dimensões de imagem, por exemplo, muitas vezes você quer usar isso.

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

28
bighearted

Do Documento da API do jQuery

Enquanto o JavaScript fornece o evento load para executar o código quando uma página É processada, 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 DOM tiver sido totalmente Construída. O handler passado para .ready() é garantido como Executado depois que o DOM estiver pronto, então este é geralmente o melhor lugar para Anexar 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 Referenciar os scripts.

Nos casos em que o código depende de recursos carregados (por exemplo, se as dimensões De uma imagem forem necessárias), o código deve ser colocado em um manipulador Para o evento load.


Resposta à segunda questão -

Não, eles são idênticos, desde que você não esteja usando o jQuery em nenhum modo de conflito.

11
Rifat

Essas três funções são as mesmas.

$(document).ready(function(){

}) 

e

$(function(){

}); 

e

jQuery(document).ready(function(){

});

aqui $ é usado para definir jQuery como $ = jQuery

Agora a diferença é que

$(document).ready é o evento jQuery que é acionado quando DOM é carregado, por isso é acionado quando a estrutura do documento está pronta.

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

9
Bharat Chodvadiya

O evento pronto ocorre depois que o documento HTML foi carregado, enquanto o evento onload ocorre mais tarde, quando todo o conteúdo (por exemplo, imagens) também foi carregado.

O evento onload é um evento padrão no DOM, enquanto o evento pronto é específico do jQuery. A finalidade do evento pronto é que ele ocorra o mais cedo possível após o carregamento do documento, para que o código que adiciona funcionalidade aos elementos na página não precise aguardar o carregamento de todo o conteúdo.

9
Deep

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


$(document).ready(function(){

}) 

e

$(function(){

});

e

jQuery(document).ready(function(){

});

Não há diferença entre os 3 códigos acima.

Eles são equivalentes, mas você pode enfrentar conflitos se qualquer outro JavaScript Frameworks usar o mesmo símbolo de dólar $ como um nome de atalho.

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

O evento pronto é sempre executado na única página html que é 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 () em scripts jquery ...

3
Kumar Immanuel
$(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"); 
});
2
Pavan Hukerikar

$ (window) .load é um evento que é acionado quando o DOM e todo o conteúdo (tudo) da página é totalmente carregado, como CSS, imagens e quadros. Um melhor exemplo é se queremos obter o tamanho real da imagem ou obter os detalhes de qualquer coisa que usamos.

$ (document) .ready () indica que o código nele precisa ser executado quando o DOM for carregado e estiver pronto para ser manipulado pelo script. Não esperará que as imagens sejam carregadas 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 os mesmos, $ é o nome do alias do jQuery, você pode enfrentar conflitos se qualquer outro JavaScript Frameworks usar o mesmo símbolo de dólar $. Se você enfrenta o conflito, a equipe do jQuery fornece uma solução sem conflito leia mais.

$ (window) .load foi preterido em 1.8 e removido em jquery 3.0 

0
Srikrushna Pal