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

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

    O evento ready 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 ready é específico do jQuery. A finalidade do evento ready é 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.

    window.onload é o evento JavaScript integrado, mas como sua implementação tinha sutis peculiaridades em navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 e Opera ), o jQuery fornece document.ready , que abstrai esses resources e triggers logo como o DOM da página está pronto (não espera por imagens, etc.).

    $(document).ready (note que não é document.ready , que é indefinido) é uma function jQuery, envolvendo e fornecendo consistência para os seguintes events:

    • document.ondomcontentready / document.ondomcontentloaded – um evento newish que é acionado quando o DOM do documento é carregado (o que pode levar algum tempo até que as imagens, etc. sejam carregadas); novamente, ligeiramente 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.)

    $(document).ready() é um evento jQuery. O método $(document).ready() do JQuery é chamado assim que o DOM estiver pronto (o que significa que o navegador analisou o HTML e construiu a tree 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 fazem), ele será triggersdo nesse evento. (Observe que o evento DOMContentLoaded foi adicionado somente ao IE no IE9 +.)

    Duas syntaxs 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 é completamente carregado. Coloque os manipuladores de events aqui.
    • Pode ser usado várias vezes.
    • Substitua $ por jQuery quando você receber “$ não está definido”.
    • Não usado se você quiser manipular imagens. Use $(window).load() vez disso.

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

    Um evento de carregamento do Windows é acionado quando todo o conteúdo da sua página é totalmente carregado, incluindo o conteúdo DOM (modelo de object de documento) e JavaScript , frameworks e imagens asynchronouss . Você também pode usar body onload =. Ambos são iguais; window.onload = function(){} e são formas diferentes de usar o mesmo evento.

    O evento de function jQuery $document.ready é executado um pouco antes de window.onload e é chamado assim que o DOM (Document object model) é carregado em sua página. Não esperará que as imagens, frames fiquem totalmente carregadas .

    Extraído do seguinte artigo: como $document.ready() é diferente de window.onload()

    Uma palavra de caucanvas sobre o uso de $(document).ready() com o Internet Explorer. Se uma solicitação de HTTP for interrompida antes de todo o documento ser carregado (por exemplo, enquanto uma página estiver fluindo para o navegador, outro link será clicado), o IE acionará o evento $(document).ready .

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

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

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

    Eventos

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

    $(document).on('load', handler) é um evento que será acionado assim que todos os resources forem carregados do servidor. Imagens são carregadas agora. Enquanto o onload é um evento HTML bruto, o ready é construído pelo jQuery.

    Funções

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

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

    Leitura Adicional

    • A temporização
    • Na function pronta
    • Um exemplo
    • Promessas
    • O alias do evento removido

    window.onload: um evento normal de JavaScript.

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

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

     $(document).ready(function() { // Code to be executed alert("Document is ready"); }); 

    O window.load no entanto, aguardará a página ser totalmente carregada. Isso inclui frameworks internos, imagens etc.

     $(window).load(function() { //Fires when the page is loaded completely alert("window is loaded"); }); 

    Uma coisa a lembrar (ou devo dizer que lembro) é que você não pode empilhar onload s como você pode com ready . Em outras palavras, a mágica do jQuery permite múltiplos ready na mesma página, mas você não pode fazer isso com o onload .

    O último onload sobrescreverá qualquer onload s anterior.

    Uma boa maneira de lidar com isso é com uma function aparentemente escrita por um Simon Willison e descrita em Using Multiple JavaScript Onload Functions .

     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 */ }); 

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

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

    $(document).ready() é geralmente o wrapper do jQuery para garantir que todos os elementos carregados sejam usados ​​no jQuery …

    Olhe para o código fonte do jQuery para entender como ele 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:

    insira a descrição da imagem aqui

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

    Você pode usar o evento document.ready se quiser intervir “cedo” no processo de renderização, sem esperar que as imagens sejam carregadas. Se você precisar que as imagens (ou qualquer outro “conteúdo”) estejam prontas antes que seu script “faça alguma coisa”, será necessário esperar até window.onload .

    Por exemplo, se você estiver implementando um padrão de “Apresentação de slides” e precisar executar cálculos com base nos tamanhos das imagens, poderá aguardar até window.onload . Caso contrário, você poderá ter alguns problemas randoms, dependendo de quão rápido as imagens serão carregadas. Seu script seria executado simultaneamente com o encadeamento que carrega imagens. Se o script for longo o suficiente ou o servidor for rápido o suficiente, talvez você não perceba um problema se as imagens chegarem a tempo. Mas a prática mais segura seria permitir que as imagens fossem carregadas.

    document.ready pode ser um bom evento para você mostrar algum sinal de “carregando …” para os usuários, e no window.onload , você pode concluir qualquer script que precise de resources carregados e, finalmente, remover o “Carregando …” placa.

    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; 

    window.onload é uma function inbuilt do JavaScript. window.onload trigger quando a página HTML é carregada. window.onload pode ser escrito apenas uma vez.

    document.ready é uma function 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.ready pode ser escrito várias vezes de acordo com os requisitos.

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

    1. obter o documento object e empurrá-lo, uma vez que não está no escopo local, ele deve fazer uma pesquisa de tabela de hash para encontrar onde está o documento, felizmente documento está vinculado globalmente por isso é uma única pesquisa.
    2. encontre o object $ e selecione-o, já que não está no escopo local, ele deve fazer uma pesquisa de tabela de hash, que pode ou não ter colisões.
    3. encontre o object f no escopo global, que é outra pesquisa de tabela de hash, ou push function object e inicialize-o.
    4. Chame ready do object selecionado, que envolve outra pesquisa de tabela de hash no object selecionado para encontrar o método e invocá-lo.
    5. feito.

    No melhor dos casos, trata-se de duas pesquisas de tabela de hash, mas isso ignora o trabalho pesado feito pelo jQuery, em que $ é a fonte de todas as inputs possíveis do jQuery, portanto é provável que outro mapa envie a consulta para o manipulador correto.

    Alternativamente, você poderia fazer isso:

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

    qual vai

    1. encontre a janela do object no escopo global, se o JavaScript for otimizado, ele saberá que, como a janela não é alterada, ela já tem o object selecionado, portanto, nada precisa ser feito.
    2. object de function é empurrado na pilha de operandos.
    3. Verifique se onload é uma propriedade ou não, fazendo uma pesquisa de tabela de hash, uma vez que é, é chamado como uma function.

    No melhor dos casos, isso custa uma consulta de tabela de hash única, que é necessária porque onload deve ser buscado.

    Idealmente, o jQuery iria compilar suas consultas para strings que podem ser coladas para fazer o que você queria que o jQuery fizesse, mas sem o tempo de execução do jQuery. Desta forma, você tem uma opção de

    1. faça o despacho dynamic de jquery como fazemos hoje.
    2. faça com que o jQuery compile sua consulta para uma string JavaScript pura que pode ser passada para o eval para fazer o que você deseja.
    3. copie o resultado de 2 diretamente no seu código e pule o custo do eval .