1245

Quais são as diferenças entre window.onloado $(document).ready()método JavaScript e jQuery ?

javascript jquery dom-events unobtrusive-javascript Vaibhav Jain
fonte

2

possível duplicata de $ (document) .ready equivalente sem jQuery

Kzqai

A maioria das respostas aqui está desatualizada. A maneira como o jQuery implementa atualmente $().ready()faz com que seja acionado window.onloadalgumas vezes.

Shikkediel 12/06/19

1243

O readyevento ocorre após o carregamento do documento HTML, enquanto o onloadevento ocorre posteriormente, quando todo o conteúdo (por exemplo, imagens) também foi carregado.

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

Guffa
fonte

153

@baptx: Você está errado. O readyevento é específico para jQuery. Ele está usando o DOMContentLoadedevento se estiver disponível no navegador, caso contrário ele o emula. Não há equivalente exato no DOM porque o DOMContentLoadedevento não é suportado em todos os navegadores.

Guffa

18

Ok, mas o mesmo resultado existe com DOMContentLoaded, talvez você deve ter especificado isso

baptx

55

@baptx: Eu não achei que fosse relevante para a questão, e ainda não o faço.

Guffa

17

Por que o voto negativo? Se você não explicar o que acha que está errado, não poderá melhorar a resposta.

Guffa

4

Não existe evento como onload. onloadé o nome de uma propriedade de objeto que armazena uma função a ser chamada quando o loadevento é acionado.

Scott Marcus

140

window.onloadé o evento JavaScript interno, mas como sua implementação teve peculiaridades sutis nos navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 e Opera ), o jQuery fornece document.ready, que abstrai esses usuários e é acionado assim que o DOM da página estiver pronto (não espera imagens, etc.).

$(document).ready(note que é não document.ready , que é indefinido) é um jQuery função, acondicionamento e proporcionando consistência para os seguintes eventos:

document.ondomcontentready/ document.ondomcontentloaded- um evento novo que é acionado quando o DOM do documento é carregado (que pode levar algum tempo antes que as imagens, etc. sejam carregadas); novamente, um pouco diferente no Internet Explorer e no resto do mundo
e window.onload(que é implementado mesmo em navegadores antigos), que é acionado quando a página inteira é carregada (imagens, estilos etc.)

Piskvor saiu do prédio
fonte

16

Há um pequeno equívoco aqui: o loadevento de windowé implementado de forma consistente nos navegadores. O problema que o jQuery e outras bibliotecas estão tentando resolver é o que você mencionou, que é que o loadevento não é acionado até que todos os recursos dependentes, como imagens e folhas de estilo, tenham sido carregados, o que pode levar muito tempo após o carregamento completo do DOM, processado e pronto para interação. O evento que é acionado na maioria dos navegadores quando o DOM está pronto é chamado DOMContentLoaded, não DOMContentReady.

Tim Down

2

@ Tim Down: razoavelmente é a palavra-chave aqui; pelo menos algum objeto sniffing costumava ser necessário, mesmo com onload(existem diferenças no FF / IE / Opera). Quanto ao DOMContentLoaded, você está totalmente correto. Edição para esclarecer.

Piskvor saiu do prédio 13/09/10

Que tipo de objeto sniffing você quer dizer?

Tim Down

1

@ Tim Down: Eu sei que o Opera tinha , mas o gatilho do evento era um pouco peculiar (para acionar com segurança, document.onloadera utilizável). No que diz respeito ao window.onload: window.onload = fn1;window.onload=fn2;- somente o fn2 seria chamado onload. Alguns webhosts gratuitos inserem seu próprio código nos documentos e, às vezes, isso atrapalha o código in-page.

Piskvor saiu do prédio 13/09/10

1

A gravação de "document.ready" não está incorreta? o objeto de documento não possui um método pronto, o objeto jQuery faz isso retornado da chamada $ (document). Edite esta resposta se estiver certo, porque isso é muito confuso.

A. Sallai

87

$(document).ready()é um evento jQuery. O $(document).ready()método JQuery é chamado assim que o DOM estiver pronto (o que significa que o navegador analisou o HTML e construiu a árvore DOM). Isso permite que você execute o código assim que o documento estiver pronto para ser manipulado.

Por exemplo, se um navegador suportar o evento DOMContentLoaded (como muitos navegadores não-IE), ele será acionado nesse evento. (Observe que o evento DOMContentLoaded foi adicionado apenas ao IE no IE9 +.)

Duas sintaxes podem ser usadas para isso:

$( document ).ready(function() {
   console.log( "ready!" );
});

Ou a versão abreviada:

$(function() {
   console.log( "ready!" );
});

Pontos principais para $(document).ready():

Não esperará que as imagens sejam carregadas.
Usado para executar JavaScript quando o DOM está completamente carregado. Coloque manipuladores de eventos aqui.
Pode ser usado várias vezes.
Substitua $por jQueryquando receber "$ não está definido".
Não usado se você deseja manipular imagens. Use em $(window).load()vez disso.

window.onload()é uma função JavaScript nativa. O window.onload()evento é acionado quando todo o conteúdo da sua página é carregado, incluindo o DOM (modelo de objeto de documento), anúncios em banner e imagens. Outra diferença entre os dois é que, embora possamos ter mais de uma $(document).ready()função, só podemos ter uma onloadfunção.

James Drinkard
fonte

4

Ponto secundário: A discussão sobre o IE é pouco formulada. Não é que o IE (8 e anterior) "não possa ser acionado com segurança" até que o readyState do documento seja concluído, é que o IE não possuía um evento DOMContentLoaded. Não uma questão de "segurança", mas uma característica ausente no IE, adicionado no IE 9.

ToolmakerSteve

Você está correto, então eu editei a resposta para refletir seu comentário e obrigado!

James Drinkard

Você diz "Não vai esperar que as imagens sejam carregadas". e quanto a outros arquivos, js mais importante? Muitas vezes, antes de chamar a função de outro arquivo - preciso saber se está carregado.

Darius.V

Esse é outro tópico completamente, mas se eu entendo o que você está perguntando, é baseado em como você estrutura sua página, incluindo a ordem em que você coloca os arquivos js. Aqui está um link que entra em mais detalhes: ablogaboutcode.com/2011/06/14/… HTH, James

James Drinkard

Por que alguém deseja usar $ (document) .ready () várias vezes?

Usman

43

Um evento de carregamento do Windows é acionado quando todo o conteúdo da sua página é totalmente carregado, incluindo o conteúdo do DOM (modelo de objeto do documento) e JavaScript assíncrono , quadros e imagens . Você também pode usar onload do corpo. Ambos são iguais; window.onload = function(){}e <body onload="func();">há maneiras diferentes de usar o mesmo evento.

O$document.ready evento da função jQuery é executado um pouco antes window.onloade é chamado assim que o DOM (Document Object Model) é carregado na sua página. Não esperará que as imagens e os quadros sejam totalmente carregados .

Retirado do seguinte artigo: como $document.ready()é diferente dewindow.onload()

Vivek
fonte

Eu acho que essa é a melhor resposta!

Haoyu Chen

3

Eu poderia concordar, se não fosse copiado palavra por palavra.

Kevin B

23

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});

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

Expandir snippet

dev4092
fonte

22

Uma palavra de cautela ao usar $(document).ready()com o Internet Explorer. Se uma solicitação HTTP for interrompida antes que o documento inteiro seja carregado (por exemplo, enquanto uma página estiver sendo transmitida para o navegador, outro link será clicado), o IE acionará o $(document).readyevento.

Se algum código dentro do $(document).ready()evento fizer referência a objetos DOM, existe o potencial desses objetos não serem encontrados e podem ocorrer erros de Javascript. Proteja suas referências a esses objetos ou adie o código que faz referência a esses objetos para o evento window.load.

Não consegui reproduzir esse problema em outros navegadores (especificamente, Chrome e Firefox)

área coberta
fonte

Qual versão do IE? Eu sei que devo me preocupar com compatibilidade, mas é difícil com o IE. É aceitável usar document.ready por apenas JavaScript?

Monica

1

IE6, 7 e 8. Consulte: stackoverflow.com/questions/13185689/…

James Drinkard

22

Uma pequena dica:

Sempre use o window.addEventListenerpara adicionar um evento à janela. Porque dessa maneira você pode executar o código em diferentes manipuladores de eventos.

Código correto:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

Expandir snippet

Código inválido:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Expandir snippet

Isso ocorre porque onload é apenas propriedade do objeto, que é sobrescrita.

Por analogia addEventListener, é melhor usar $(document).ready()do que onload.

Илья Зеленько
fonte

3

Isso não responde à pergunta.

17

Eventos

$(document).on('ready', handler)liga-se ao evento ready do jQuery. O manipulador é chamado quando o DOM é carregado . Talvez ainda estejam faltando recursos como imagens . Ele nunca será chamado se o documento estiver pronto no momento da encadernação. O jQuery usa o DOMContentLoaded -Event para isso, emulando-o se não estiver disponível.

$(document).on('load', handler)é um evento que será acionado assim que todos os recursos forem carregados do servidor. As imagens estão carregadas agora. Enquanto onload é um evento HTML bruto, ready é criado pelo jQuery.

Funções

$(document).ready(handler)na verdade é uma promessa . O manipulador será chamado imediatamente se o documento estiver pronto no momento da chamada. Caso contrário, ele se readyligará ao -Event.

Antes do jQuery 1.8 , $(document).load(handler)existia um alias para $(document).on('load',handler).

Leitura adicional

abstraktor
fonte

você pode explicar que $ (document) .load (handler) se comporta da mesma forma que a ligação ao evento de carregamento. Ao contrário de $ .fn.ready, ele não chamará imediatamente?

Nabeel Khan

Eu acho que você ficou confuso com $.fn.loadisso não se comporta mais como fichário de eventos. De fato, está obsoleto desde o jquery 1.8. Eu atualizei-o de acordo.

abstraktor

16

O $(document).ready()é um evento jQuery que ocorre quando o documento HTML foi totalmente carregado, enquanto o window.onloadevento ocorre mais tarde, quando tudo, incluindo imagens na página, é carregado.

Também window.onload é um evento javascript puro no DOM, enquanto o $(document).ready()evento é um método no jQuery.

$(document).ready() geralmente é o invólucro do jQuery para garantir que todos os elementos carregados sejam usados no jQuery ...

Veja o código-fonte do jQuery para entender como está funcionando:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

Também criei a imagem abaixo como uma referência rápida para ambos:

Alireza
fonte

1

bonito, referir os documentos é um ponto positivo .. thnx

Irf 21/04

13

window.onload: um evento JavaScript normal.

document.ready: um evento jQuery específico quando o HTML inteiro foi carregado.

Amir Mehdi Delta
fonte

11

Uma coisa a lembrar (ou devo dizer recordar) é que você não pode empilhar onloads como pode ready. Em outras palavras, o jQuery magic permite vários readys na mesma página, mas você não pode fazer isso onload.

O último onloadsubstituirá qualquer onloads anterior .

Uma boa maneira de lidar com isso é com uma função aparentemente escrita por um Simon Willison e descrita em Usando várias funções de carga de JavaScript .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

Donald A Nummer Jr
fonte

11

Document.ready(um evento jQuery) será acionado quando todos os elementos estiverem no lugar e poderão ser referenciados no código JavaScript, mas o conteúdo não será necessariamente carregado. Document.readyexecuta quando o documento HTML é carregado.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

No window.loadentanto, aguardará a página ser totalmente carregada. Isso inclui quadros internos, imagens etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

Mike Clark
fonte

5

O evento document.ready ocorre quando o documento HTML foi carregado, e o window.onloadevento ocorre sempre mais tarde, quando todo o conteúdo (imagens etc.) foi carregado.

Você pode usar o document.readyevento se quiser intervir "no início" no processo de renderização, sem aguardar o carregamento das imagens. Se você precisar que as imagens (ou qualquer outro "conteúdo") estejam prontas antes que o script "faça alguma coisa", será necessário aguardar até window.onload.

Por exemplo, se você estiver implementando um padrão "Apresentação de slides" e precisar executar cálculos com base nos tamanhos das imagens, poderá esperar até window.onload. Caso contrário, você poderá ter alguns problemas aleatórios, dependendo da velocidade com que as imagens serão carregadas. Seu script estaria sendo executado simultaneamente com o thread que carrega imagens. Se o seu script for longo o suficiente ou o servidor for rápido o suficiente, talvez você não note um problema, se as imagens chegarem a tempo. Mas a prática mais segura seria permitir o carregamento de imagens.

document.readypode ser um bom evento para você mostrar algum sinal "carregando ..." para os usuários e, após window.onload, você pode concluir qualquer script que necessite de recursos carregados e, finalmente, remover o sinal "Carregando ...".

Exemplos :-

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

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

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

Nimesh khatri
fonte

2

window.onloadé uma função incorporada do JavaScript. window.onloadacionado quando a página HTML é carregada.window.onloadpode ser escrito apenas uma vez.

document.readyé uma função da biblioteca jQuery. document.readyé acionado quando o HTML e todo o código JavaScript, CSS e imagens incluídos no arquivo HTML são completamente carregados. document.readypode ser escrito várias vezes de acordo com os requisitos.

Amit
fonte

"window.onload é uma função" está incorreto, pois @ Илья-Зеленько demonstra que é uma propriedade e não uma função. Detalhes: developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/… enquanto .ready () é uma função e espera um manipulador.

vik 29/11

1

Quando você diz $(document).ready(f), diz ao mecanismo de script para fazer o seguinte:

obter o documento do objeto e enviá-lo por push, uma vez que não está no escopo local, ele deve fazer uma pesquisa de tabela de hash para descobrir onde está o documento, felizmente, o documento está vinculado globalmente e, portanto, é uma única pesquisa.
encontre o objeto $ e selecione-o, já que não está no escopo local, ele deve fazer uma pesquisa na tabela de hash, que pode ou não ter colisões.
encontre o objeto f no escopo global, que é outra pesquisa de tabela de hash, ou pressione o objeto de função e inicialize-o.
ligar ready do objeto selecionado, que envolve outra pesquisa de tabela de hash no objeto selecionado para encontrar o método e invocá-lo.
feito.

Na melhor das hipóteses, são duas pesquisas de tabela de hash, mas isso ignora o trabalho pesado feito pelo jQuery, em que $ é a pia da cozinha de todas as entradas possíveis para o jQuery; portanto, é provável que outro mapa envie a consulta para corrigir o manipulador.

Como alternativa, você pode fazer isso:

window.onload = function() {...}

qual será

encontre a janela do objeto no escopo global; se o JavaScript for otimizado, ele saberá que, como a janela não foi alterada, ele já possui o objeto selecionado; portanto, nada precisa ser feito.
O objeto de função é empurrado na pilha de operandos.
verifique se onloadé uma propriedade ou não, fazendo uma pesquisa na tabela de hash, pois é chamada como uma função.

Na melhor das hipóteses, isso custa uma única consulta de tabela de hash, necessária porque onloaddeve ser buscada.

Idealmente, o jQuery compilaria suas consultas em strings que podem ser coladas para fazer o que você queria que o jQuery fizesse, mas sem o envio em tempo de execução do jQuery. Dessa forma, você tem a opção de

faça o envio dinâmico de jquery como fazemos hoje.
O jQuery compila sua consulta para uma string JavaScript pura que pode ser passada para avaliar para fazer o que você deseja.
copie o resultado de 2 diretamente no seu código e pule o custo de eval.

Dmitry
fonte

0

window.onload é fornecido pela API do DOM e diz "o evento load é acionado quando um determinado recurso é carregado".

"O evento load é acionado no final do processo de carregamento do documento. Nesse momento, todos os objetos no documento estão no DOM e todas as imagens, scripts, links e sub-frames terminaram o carregamento." DOM onload

Mas no jQuery $ (document) .ready () será executado apenas quando a página DOM (Document Object Model) estiver pronta para a execução do código JavaScript. Isso não inclui imagens, scripts, iframes etc. evento jquery ready

Portanto, o método jquery ready será executado mais cedo que o evento dom onload.

andyCao
fonte

window.onload vs $ (document) .ready ()

Respostas:

Uma pequena dica:

Eventos

Funções

Leitura adicional