Qual é o equivalente não-jQuery de ‘$ (document) .ready ()’?

Qual é o equivalente não-jQuery de $(document).ready() ?

A coisa boa sobre $(document).ready() é que ele triggers antes de window.onload . A function de carregamento aguarda até que tudo seja carregado, incluindo resources externos e imagens. $(document).ready , no entanto, é acionado quando a tree DOM está completa e pode ser manipulada. Se você quiser preparar o DOM pronto, sem o jQuery, você poderá entrar nesta biblioteca. Alguém extraiu apenas a parte ready do jQuery. É bom e pequeno e você pode achar útil:

domready no Google Code

Isso funciona perfeitamente, da ECMA

 document.addEventListener("DOMContentLoaded", function() { // code... }); 

O window.onload não é igual a JQuery $(document).ready porque $(document).ready espera apenas na tree DOM enquanto window.onload verifica todos os elementos, incluindo ativos e imagens externos.

EDIT : adicionado IE8 e equivalente mais antigo, graças à observação de Jan Derk . Você pode ler a fonte deste código no MDN neste link :

 // alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { // Initialize your application or run some code. } } 

Existem outras opções além de "interactive" . Veja o link MDN para detalhes.

Uma coisinha que eu juntei

domready.js

 (function(exports, d) { function domReady(fn, context) { function onReady(event) { d.removeEventListener("DOMContentLoaded", onReady); fn.call(context || exports, event); } function onReadyIe(event) { if (d.readyState === "complete") { d.detachEvent("onreadystatechange", onReadyIe); fn.call(context || exports, event); } } d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) || d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe); } exports.domReady = domReady; })(window, document); 

Como usá-lo

   

Você também pode alterar o contexto no qual o retorno de chamada é executado passando um segundo argumento

 function init(event) { alert("check the console"); this.log(event); } domReady(init, console); 

Existe uma substituição baseada em padrões, DOMContentLoaded que é suportada por mais de 90% + dos navegadores, mas não pelo IE8 (portanto, abaixo do uso do código pelo JQuery para suporte ao navegador) :

 document.addEventListener("DOMContentLoaded", function(event) { //do work }); 

A function nativa do jQuery é muito mais complicada do que apenas window.onload, como mostrado abaixo.

 function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); jQuery.ready(); }, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", arguments.callee ); jQuery.ready(); } }); // If IE and not an iframe // continually check to see if the document is ready if ( document.documentElement.doScroll && window == window.top ) (function(){ if ( jQuery.isReady ) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); } // A fallback to window.onload, that will always work jQuery.event.add( window, "load", jQuery.ready ); } 

A maneira mais fácil em navegadores recentes seria usar o GlobalEventHandlers apropriado, onDOMContentLoaded , onload , onloadeddata (…)

 onDOMContentLoaded = (function(){ console.log("DOM ready!") })() onload = (function(){ console.log("Page fully loaded!") })() onloadeddata = (function(){ console.log("Data loaded!") })() 

Em plain vanilla JavaScript, sem bibliotecas? É um erro. $ é simplesmente um identificador e é indefinido, a menos que você o defina.

O jQuery define $ como seu próprio “object tudo” (também conhecido como jQuery para que você possa usá-lo sem entrar em conflito com outras bibliotecas). Se você não estiver usando o jQuery (ou alguma outra biblioteca que o defina), $ não será definido.

Ou você está perguntando qual é o equivalente em JavaScript simples? Nesse caso, você provavelmente quer o window.onload , que não é exatamente o equivalente, mas é a maneira mais rápida e fácil de se aproximar do mesmo efeito no JavaScript vanilla.

De acordo com http://youmightnotneedjquery.com/#ready um bom substituto que ainda funciona com o IE8 é

 function ready(fn) { if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } 

O body onLoad também pode ser uma alternativa:

  Body onLoad Exmaple      

Eu não acho que o JavaScript tenha essa function embutida. É específico do jQuery.