Quais são as diferenças entre window.onload
o $(document).ready()
método JavaScript e jQuery ?
$().ready()
faz com que seja acionado window.onload
algumas vezes.
Quais são as diferenças entre window.onload
o $(document).ready()
método JavaScript e jQuery ?
$().ready()
faz com que seja acionado window.onload
algumas vezes.
Respostas:
O ready
evento ocorre após o carregamento do documento HTML, enquanto o onload
evento ocorre posteriormente, quando todo o conteúdo (por exemplo, imagens) também foi carregado.
O onload
evento é um evento padrão no DOM, enquanto o ready
evento é específico para jQuery. O objetivo do ready
evento é 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.
ready
evento é específico para jQuery. Ele está usando o DOMContentLoaded
evento se estiver disponível no navegador, caso contrário ele o emula. Não há equivalente exato no DOM porque o DOMContentLoaded
evento não é suportado em todos os navegadores.
onload
. onload
é o nome de uma propriedade de objeto que armazena uma função a ser chamada quando o load
evento é acionado.
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 mundowindow.onload
(que é implementado mesmo em navegadores antigos), que é acionado quando a página inteira é carregada (imagens, estilos etc.)load
evento 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 load
evento 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
.
onload
(existem diferenças no FF / IE / Opera). Quanto ao DOMContentLoaded
, você está totalmente correto. Edição para esclarecer.
document.onload
era 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.
$(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()
:
$
por jQuery
quando receber "$ não está definido".$(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 onload
função.
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.onload
e é 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()
$(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>
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).ready
evento.
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)
Sempre use o window.addEventListener
para 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!')
})
Código inválido:
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}
Isso ocorre porque onload é apenas propriedade do objeto, que é sobrescrita.
Por analogia addEventListener
, é melhor usar $(document).ready()
do que onload.
$(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.
$(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 ready
ligará ao -Event.
Antes do jQuery 1.8 , $(document).load(handler)
existia um alias para $(document).on('load',handler)
.
$.fn.load
isso não se comporta mais como fichário de eventos. De fato, está obsoleto desde o jquery 1.8. Eu atualizei-o de acordo.
O $(document).ready()
é um evento jQuery que ocorre quando o documento HTML foi totalmente carregado, enquanto o window.onload
evento 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:
window.onload: um evento JavaScript normal.
document.ready: um evento jQuery específico quando o HTML inteiro foi carregado.
Uma coisa a lembrar (ou devo dizer recordar) é que você não pode empilhar onload
s como pode ready
. Em outras palavras, o jQuery magic permite vários ready
s na mesma página, mas você não pode fazer isso onload
.
O último onload
substituirá qualquer onload
s 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 */
});
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.ready
executa quando o documento HTML é carregado.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
No window.load
entanto, 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");
});
O evento document.ready ocorre quando o documento HTML foi carregado, e o window.onload
evento ocorre sempre mais tarde, quando todo o conteúdo (imagens etc.) foi carregado.
Você pode usar o document.ready
evento 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.ready
pode 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;
window.onload
é uma função incorporada do JavaScript. window.onload
acionado quando a página HTML é carregada.window.onload
pode 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.ready
pode ser escrito várias vezes de acordo com os requisitos.
Quando você diz $(document).ready(f)
, diz ao mecanismo de script para fazer o seguinte:
$
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.ready
do objeto selecionado, que envolve outra pesquisa de tabela de hash no objeto selecionado para encontrar o método e invocá-lo.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á
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 onload
deve 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
eval
.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.