Diferença entre as funções $ (window) .load () e $ (document) .ready ()

216

Qual é a diferença entre $(window).load(function() {})e $(document).ready(function() {})no jQuery?

jquery Satya
fonte

Respostas:

266
  • document.readyé um evento jQuery, é executado quando o DOM está pronto, por exemplo, 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 piores / com falha) quando imagens e objetos são carregados; portanto, se você estiver usando dimensões de imagem, por exemplo, geralmente deseja usá-lo.
Nick Craver
fonte
38
abreviação de $(document).ready(function(){})is $(function(){})e outra diferença importante do window.load é que ele será executado em TODAS as futuras chamadas da função, mesmo após o DOM já inicial.
Michael Butler
2
@ dbliss Sim, eu acredito que onload é uma abreviação de $(window).on('load'). Ambos referenciando o evento load .
Free Lancer
5
@MichaelButler - Como assim it will run on ALL future calls of the function?
BornToCode
7
@ MichaelButler: Você precisa ser mais claro em seu comentário. 1) Você está falando sobre o USUÁRIO executando mais $(document).readycódigo depois que o DOM estiver pronto. Esse é um caso de uso tão pequeno que provavelmente não valia a pena confundir todo mundo com menção a ele. 2) O AMBIENTE chama apenas $(document).ready(f‌​unction(){})uma vez, quando o DOM está pronto. Se o usuário, por algum motivo, executar mais $(document).readydepois que o DOM estiver pronto, sim, ele será executado imediatamente.
Doug S
4
Eu imploro para diferir, Michael. Vamos deixar assim e não degradar em comentários inúteis. Pelo menos as pessoas confusas agora têm sua resposta.
Doug S
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


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

A $(window).load()não está disponível em 3,0 jQuery

$( window ).load(function() {
        // Handler for .load() called.
});

Para contornar isso, você pode usá-lo como um "Anexo do Manipulador de Eventos" 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Kean Amaral
fonte
14

A diferença são:

$(document).ready(function() { é um evento jQuery que é acionado quando o DOM é carregado, portanto, é acionado quando a estrutura do documento está pronta.

$(window).load() O evento é acionado após o carregamento de todo o conteúdo.

Bharat Chodvadiya
fonte
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load será acionado após todo o conteúdo do iframe ser carregado

Shaik Rasool
fonte
7

$(document).ready acontece quando todos os elementos estão presentes no DOM, mas não necessariamente todo o conteúdo.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadou $(window).load()acontece depois que todos os recursos de conteúdo (imagens etc.) foram carregados.

$(window).load(function() {
    alert("window is loaded");
});
Purvik Dhorajiya
fonte
0

document.ready (jQuery) document.ready será executado logo após o carregamento do documento HTML e o DOM estar pronto.

DOM: O DOM (Document Object Model) é uma convenção multiplataforma e independente de idioma para representar e interagir com objetos em documentos HTML, XHTML e XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript interno) No entanto, o window.load aguardará o carregamento completo da página, incluindo quadros internos, imagens etc. * window.load é um método JavaScript embutido, conhecido por possuir peculiaridades em navegadores antigos (IE6, IE8, versões antigas de FF e Opera), mas geralmente funcionam em todos eles.

window.load pode ser usado no evento onload do corpo assim (mas eu sugiro fortemente que você evite misturar códigos como este no HTML, pois é uma fonte de confusão posteriormente):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Arun Kumar
fonte
0

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

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

Srikrushna
fonte
0

Eu acho que o $(window).loadevento não é suportado pelo JQuery 3.x

user8816619
fonte
1
De acordo com a documentação, o evento $ (window) .load foi removido no JQuery 3.0
Mathieu VIALES
1
Isto está certo. Para contornar isso, você pode usá-lo como um "Anexo de Manipulador de Eventos": $ (window) .on ("load", function () {// Manipulador para .load () chamado.});
Kean Amaral #
0

De acordo com os eventos de nível 2 do DOM, o loadevento deve ser acionado document, não ativado window. No entanto, loadé implementado windowem todos os navegadores para compatibilidade com versões anteriores.

Jones Agyemang
fonte