javascript domready?

Eu sei que posso usar diferentes estruturas como prototype ou jquery para append uma function para o window.onload, mas não é o que estou procurando.

Eu preciso de algo como .readyState para que eu possa fazer algo assim:

if(document.isReady){ var id = document.getElem ... } 

Existe alguma outra maneira de usar o que os frameworks fazem?

Eu atualizei o código da biblioteca DOMAssistant que funciona bem comigo

 var domReady = (function (){ var arrDomReadyCallBacks = [] ; function excuteDomReadyCallBacks(){ for (var i=0; i < arrDomReadyCallBacks.length; i++) { arrDomReadyCallBacks[i](); } arrDomReadyCallBacks = [] ; } return function (callback){ arrDomReadyCallBacks.push(callback); /* Mozilla, Chrome, Opera */ if (document.addEventListener ) { document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false); } /* Safari, iCab, Konqueror */ if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) { browserTypeSet = true ; var DOMLoadTimer = setInterval(function () { if (/loaded|complete/i.test(document.readyState)) { //callback(); excuteDomReadyCallBacks(); clearInterval(DOMLoadTimer); } }, 10); } /* Other web browsers */ window.onload = excuteDomReadyCallBacks; } })() 

Edit: Como o ano de 2018 vem em cima de nós, acho que é seguro para ouvir o evento DOMContentLoaded .

 function fireOnReady() { /* ... */ } if (document.readyState === 'complete') { fireOnReady(); } else { document.addEventListener("DOMContentLoaded", fireOnReady); } 

Por favor, note que o evento só irá triggersr uma vez quando a sua página carregar! Se você tem que suportar navegadores muito antigos, então confira o script super leve que eu coloquei abaixo.



Apenas para referência histórica:



jQuery tem uma propriedade não documentada chamada isReady que é usada internamente para determinar se o evento pronto do DOM foi triggersdo:

 if($.isReady) { // DOM is ready } else { // DOM is not yet ready } 

Eu comecei em 1.5.2 voltou até 1.3.2 e a propriedade está lá. Enquanto não documentado, eu diria que você pode confiar nesta propriedade em futuras versões do jQuery. Edit: E um ano depois – v1.7.2, eles ainda usam $.isReady – ainda não documentado, então por favor use a seu próprio risco. Tenha cuidado ao atualizar.

Editar: v1.9, eles ainda usam $.isReady – ainda não documentado

Edit: v2.0, com todas as suas mudanças “principais”, ainda usa $.isReady – ainda não documentado

Editar: v3.x ainda usa $.isReady – ainda não documentado

Edit: Como várias pessoas apontaram, o acima não responde realmente a pergunta. Então, acabei de criar um mini snippet pronto para DOM que foi inspirado pelo snippet pronto para DOM ainda menor de Dustin Diaz. Dustin criou uma maneira legal de verificar o documento readyState com algo semelhante a isto:

 if( !/in/.test(document.readyState) ) { // document is ready } else { // document is NOT ready } 

A razão pela qual isso funciona é porque o navegador tem três estados de carregamento: “carregamento”, “interativo” e “completo” (o antigo WebKit também usava “carregado”, mas você não precisa mais se preocupar com isso) . Você notará que “loading” e “interactive” contêm o texto “in” … então se a string “in” for encontrada dentro de document.readyState , então sabemos que ainda não estamos prontos.

Embora eu geralmente defenda evitar o uso de estruturas, a menos que seja necessário, eu diria que usar um neste caso é perfeitamente aceitável. Aqui está o jQuery:

 $(function () { // do stuff after DOM has loaded }); 

Note que NÃO é o mesmo que um evento window.onload , já que o onload executado primeiro depois que outros resources são carregados (imagens, etc.). O código que usei no meu exemplo será executado quando o DOM terminar de carregar, ou seja, quando o full A estrutura HTML está disponível (não necessariamente quando imagens, CSS, etc. estão disponíveis).

Se você quiser uma variável verificável, você pode definir um na function de pronto:

 var documentIsReady = false; $(function () { documentIsReady = true; }); 

É claro que você pode encontrar ainda mais bibliotecas leves do que o jQuery, se tudo o que você quer fazer é verificar o pronto para DOM. Mas use uma biblioteca nos casos em que diferentes navegadores se comportam de maneira muito diferente (esse é um desses casos).

Usando algum código da biblioteca DOMAssistant , fazer sua própria function “DOM is ready” não deve ser muito difícil:

 var domLoaded = function (callback) { /* Internet Explorer */ /*@cc_on @if (@_win32 || @_win64) document.write(' 

Não testado, mas deve funcionar. Eu o simplifiquei do DOMAssistant, porque o DOMAssistant permite múltiplos callbacks e tem checagem para ter certeza de que você não pode adicionar a mesma function duas vezes, etc.

Nos cinco anos que se passaram desde que essa pergunta foi feita, o DOMContentLoaded se tornou um evento universalmente suportado, e você pode usá-lo.

 document.addEventListener('DOMContentLoaded', function() { //.. do stuff .. }, false); 

Confira esta demonstração da microsoft. -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html E aqui está a essência do código que permite executar o JS no DOM pronto …

 (function () { function load2(){ // put whatever you need to load on DOM ready in here document.getElementById("but3").addEventListener("click", doMore, false); } if (window.addEventListener) { window.addEventListener('DOMContentLoaded', load2, false); } else { window.attachEvent('onload', load2); } } ()); 

Aqui está algumas das fonts de javascript para a demonstração. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

Isso funciona bem. Nice !! .. no Google Chrome e IE 9.

 document.addEventListener("DOMContentLoaded", function(e){ console.log("dom ready");//output to web browser console }); 

nenhum JQuery necessário para isso. Não há necessidade de passar o terceiro parâmetro em um DOMContentLoaded, pois esse evento não tem pai para atravessar o evento. Também não é preciso ficar todo chique com o que todo mundo está dizendo. Isso informará quando o DOM estiver totalmente carregado e pronto para uso. Eu LOLed quando notei o assistente DOM lib. Essa lib é absolutamente inútil.

O evento DOMContentLoaded é triggersdo quando o documento foi completamente carregado e analisado, sem esperar que as folhas de estilo, imagens e subframes concluam o carregamento

addEventListener() é uma ótima function para verificar qualquer evento, incluindo o status pronto do DOM. Ao usar “DOMContentLoaded” o terceiro parâmetro em addEventListener() não é necessário, pois esse acionador não possui nenhum item pai para passar o evento também. No meu exemplo acima, você notará que o segundo parâmetro é uma function anônima. Você também pode passar o nome de uma function para o segundo parâmetro.

 document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]); 

Outro benefício para usar isso em JQuery é que isso não irá quebrar quando você atualizar o JQuery.

jQuery não usa window.onload .

$(document).ready() espera até que o DOM tenha sido carregado e possa ser atravessado (o restante do conteúdo pode ou não ser carregado por esse ponto).

Se você puxar a fonte para jQuery e ordenar a bagunça, verá que o trabalho é feito pelo método bindReady() , que tem várias implementações diferentes para diferentes navegadores e somente quando todas essas implementações falharem, ele voltará a escutar para o evento de carregamento da janela.

Esta é realmente uma das maiores razões pelas quais a maioria das pessoas usa frameworks como o jQuery, porque a solução para isso não é consistente entre os navegadores.

Tente isto:
Link: onDomReady no GitHub ou na fonte abaixo:

 if(document.ondomready == undefined) { document.ondomready = {}; document.ondomready = null; } else { document.ondomready=document.ondomready; } var oldonload=document.onload; var isLaunched = 0; document.onload = function() { if(oldonload !== null) { oldonload.call(); } }; document.addEventListener("DOMContentLoaded", function onDom(evt) { var olddomready = document.ondomready; if(olddomready !== null) { if(isLaunched == 0) { olddomready.call(evt); isLaunched == 1; //We now launched the mapped DOMContentLoaded Event } else { //We already launched DOMContentLoaded Event } } }, false); 

Eu já testei isso no Opera 11.x / 12.x. Ainda não testado em outros. Deixe-me saber se eles fazem.

Nota: Ainda não carreguei o repository, mas em breve no meu tempo livre.

Se você quer libs menores que fazem apenas coisas particulares, você pode usar libs em microjs . Para a questão em mãos, o método pronto de DOMStatic libs pode ser usado.