janela.onload vs $(documento).pronto()

Question

janela.onload vs $(documento).pronto()

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

1102

javascript jquery javascript-events unobtrusive-javascript

Author: Peter Mortensen, 2010-09-13

Source

15 answers

window.onload é o built-in de eventos de JavaScript, mas como a sua implementação teve sutil peculiaridades entre os navegadores (Firefox, Internet Explorer 6, Internet Explorer 8, e Opera), jQuery fornece document.ready, que separa os que estão longe, e é accionado assim que a página do DOM estiver pronto (não espera por imagens, etc.).

$(document).ready (note que não document.ready, o que é indefinido) é uma função jQuery, acondicionamento e fornecimento de consistência para o seguinte eventos:

document.ondomcontentready / document.ondomcontentloaded - um evento newish que dispara quando o DOM do documento é carregado (que pode ser algum tempo antes de as imagens, etc. são carregados); novamente, ligeiramente diferente no Internet Explorer e no resto do mundo
e window.onload (que é implementado mesmo em navegadores antigos), que dispara quando a página inteira carrega (imagens, estilos, etc.)

124

Author: Piskvor, 2016-04-11 21:26:10

$(document).ready() é um evento jQuery. O método jQuery $(document).ready() é chamado assim que o DOM está 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 suporta o evento DOMContentLoaded (como muitos navegadores não-IE fazem), então ele irá disparar sobre esse evento. (Note que o evento DOMContentLoaded só foi adicionado ao IE no IE9+.)

Duas sintaxas podem ser usado para isto:

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

Ou a versão abreviada:

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

Principais pontos tratados $(document).ready():

usado para executar JavaScript quando o DOM está completamente carregado. Ponham aqui os tratadores de eventos.
pode ser usado várias vezes.
substitua $ por jQuery Quando receber " $ não está definido."
não é utilizado se quiser manipular imagens. Utilize $(window).load() em vez disso.

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

80

Author: James Drinkard, 2017-01-11 14:11:32

A Windows load event display when all the content on your page is fully loaded including the DOM (document object model) and Assynchronous JavaScript, molduras e imagens. Você também pode usar o corpo onload=. Ambos são os mesmos; window.onload = function(){} e <body onload="func();"> são maneiras diferentes de usar o mesmo evento.

JQuery $document.ready o evento da função executa um pouco mais cedo do que window.onload e é chamado assim que o DOM(Document object model) for carregado na sua página. Não vai espere pelas imagens , as imagens para obter uma carga completa .

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

39

Author: Vivek, 2016-06-30 18:24:39

Uma palavra de precaução ao usar {[[0]} com o Internet Explorer. Se um pedido HTTP for interrompido antes de , o documento inteiro é carregado (por exemplo, enquanto uma página está a transmitir para o navegador, é carregada outra ligação) ou seja, irá activar o evento $(document).ready.

Se algum código dentro dos objetos DOM de referência de eventos $(document).ready(), o potencial existe para esses objetos não serem encontrados, e erros de Javascript podem ocorrer. Guarde as suas referências a esses objectos, ou adie o código que faz referência a esses objectos à janela.carregar o evento.

Não fui capaz de reproduzir este problema noutros navegadores (especificamente, cromados e Firefox)

21

Author: deck, 2012-08-27 19:34:30

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

18

Author: dev4092, 2017-11-21 05:24:48

Eventos

$(document).on('ready', handler) liga-se ao Evento Pronto do jQuery. O manipulador é chamado quando o DOM é carregado . Activos como as imagens talvez ainda estejam em falta. Nunca será chamado se o documento estiver pronto no momento da vinculação. jQuery usa o DOMContentLoaded-evento para isso, emulá-lo se não estiver disponível.

$(document).on('load', handler) é um evento que será disparado logo que todos os recursos sejam carregados do servidor. As imagens estão carregadas agora. Enquanto onload é um evento HTML raw, ready é construído por jQuery.

Funções

$(document).ready(handler) Na verdade é uma promessa. o encarregado será chamado imediatamente se o documento estiver pronto no momento da chamada. Caso contrário, liga-se ao evento ready.

Antes do jQuery 1.8, $(document).load(handler) existia como pseudónimo de $(document).on('load',handler).

Leitura Adicional

15

Author: abstraktor, 2016-04-11 21:32:48

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

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

$(document).ready() é geralmente a embalagem para jQuery para se certificar de que todos os elementos carregados para ser usado em jQuery...

Olha para o código-fonte da jQuery para perceber como é que é trabalho:

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:

12

Author: Alireza, 2018-03-27 11:12:15

Janela.onload: um evento JavaScript normal.

Documento.pronto: um evento específico jQuery quando todo o HTML tiver sido carregado.

11

Author: Amir Mehdi Delta, 2016-04-11 21:26:53

Document.ready (um evento jQuery) irá disparar 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 executa quando o documento HTML é carregado.

$(document).ready(function() {

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

O window.load no entanto, vai esperar que a página seja completamente carregada. Isto inclui quadros interiores, imagens, etc.

$(window).load(function() {

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

11

Author: Mike Clark, 2016-04-11 21:37:45

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

O último {[1] } irá anular qualquer onloadanterior

Uma boa maneira de lidar com isso é com uma função aparentemente escrita por Simon Willison e descrita em usar 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 */
});

10

Author: Donald A Nummer Jr, 2016-04-11 21:29:41

O documento.o evento pronto 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.

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 das imagens (ou qualquer outro "conteúdo") prontas antes de seu script "faz alguma coisa", você precisa esperar até window.onload.

Por exemplo, se estiver a implementar uma"apresentação" padrão, e você precisa realizar cálculos com base no tamanho da imagem, você pode querer esperar até window.onload. Caso contrário, você pode experimentar alguns problemas aleatórios, dependendo de quão rápido as imagens serão carregadas. O seu programa estaria a correr simultaneamente com o tópico que carrega as imagens. Se o seu script for longo o suficiente, ou o servidor for rápido o suficiente, você pode não notar um problema, se as imagens chegam a tempo. Mas a prática mais segura seria permitir que as imagens fossem carregadas.

document.ready poderia ser um bom evento para você mostrar algum " Carregamento..."assine para os usuários, e em window.onload, você pode completar qualquer scripts que necessitasse de recursos carregados, e então, finalmente, remover o "carregamento..." assinar.

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;

4

Author: Nimesh khatri, 2018-07-02 05:20:53

window.onload é uma função Inbuilt JavaScript. window.onload despoleta quando a página HTML for carregada. Só pode ser escrito uma vez.

document.ready é uma função da biblioteca jQuery. document.ready despoleta quando HTML e todo o código JavaScript, CSS e imagens que estão incluídas no ficheiro HTML são carregadas por completo. document.ready pode ser escrito várias vezes de acordo com os requisitos.

2

Author: Amit, 2016-04-11 21:36:17

Uma pequena dica:

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

Código correcto:

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

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

Código inválido:

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

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

Isto é porque onload é apenas propriedade do objeto, que é substituído.

2

Author: Илья Зеленько, 2018-09-02 15:26:21

Quando disser $(document).ready(f), diga ao script engine para fazer o seguinte:

obter o documento objeto e empurrá-lo, uma vez que não está no escopo local, ele deve fazer uma pesquisa de tabela de hash para encontrar onde o documento está, felizmente o documento está globalmente ligado de modo que é uma única pesquisa.
encontre o objeto $ e selecione-o, uma vez que não está no escopo local, ele deve fazer uma pesquisa de tabela de hash, que pode ou não ter colisões.
encontra o objecto f no âmbito global, que é: outra pesquisa de tabela de hash, ou empurrar objeto de função e inicializá-lo.
chamada ready do objecto seleccionado, que envolve outra tabela de hash procurar no objecto seleccionado para encontrar o método e invocá-lo.

No melhor dos casos, isto são 2 pesquisas de mesa de hash, mas isso é ignorar o trabalho pesado feito pela jQuery, onde {[[2]} é o lava-loiças da cozinha de todas as possíveis entradas para a jQuery, então outro mapa está provavelmente lá para enviar a consulta para corrigir manipulador.

Em alternativa, pode fazer isto:

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

Que irá

encontre a janela do objecto no âmbito global, se o JavaScript estiver optimizado, saberá que, uma vez que a janela não foi alterada, já tem o objecto seleccionado, pelo que nada precisa de ser feito.
o objecto da função é empurrado na pilha de comandos.
verifique se onload é uma propriedade ou não fazendo uma pesquisa de tabela de hash, uma vez que é, é chamado como uma função.

No melhor case, isso custa uma única pesquisa na tabela de hash, o que é necessário porque onload deve ser obtido. Idealmente, a jQuery compilaria as suas perguntas para cadeias de caracteres que podem ser coladas para fazer o que você queria que a jQuery fizesse, mas sem o envio em tempo de execução da jQuery. Desta forma você tem uma opção de qualquer um

peça ao jQuery para compilar a sua pesquisa para uma cadeia de JavaScript pura que possa ser passada para eval para fazer o que você querer.
Copie o resultado de 2 directamente para o seu código, e salte o custo de eval.

0

Author: Dmitry, 2018-07-02 05:15:50

score 1123 · Accepted Answer

O evento ready ocorre após o documento HTML ter sido 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 ao jQuery. O objetivo do evento ready é que ele ocorra o mais cedo possível após o documento ter carregado, de modo que o código que adiciona funcionalidade aos elementos na página não tenha que esperar que todo o conteúdo seja carregado.