JavaScript – Como detectar se o documento foi carregado (IE 7 / Firefox 3)

Eu quero chamar uma function depois que um documento é carregado, mas o documento pode ou não ter terminado de carregar ainda. Se ele foi carregado, posso apenas chamar a function. Se ele não carregou, então eu posso append um ouvinte de evento. Não consigo adicionar um eventlistener após o onload já ter sido triggersdo, já que ele não será chamado. Então, como posso verificar se o documento foi carregado? Eu tentei o código abaixo, mas não funciona totalmente. Alguma ideia?

var body = document.getElementsByTagName('BODY')[0]; // CONDITION DOES NOT WORK if (body && body.readyState == 'loaded') { DoStuffFunction(); } else { // CODE BELOW WORKS if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload', DoStuffFunction); } } 

Não há necessidade de todo o código mencionado pelos galambalazs. A maneira de navegar em vários navegadores em JavaScript puro é simplesmente testar document.readyState :

 if (document.readyState === "complete") { init(); } 

É também assim que a jQuery faz isso.

Dependendo de onde o JavaScript é carregado, isso pode ser feito dentro de um intervalo:

 var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { clearInterval(readyStateCheckInterval); init(); } }, 10); 

Na verdade, document.readyState pode ter três estados:

Retorna o “carregamento” enquanto o documento está sendo carregado, “interativo” assim que terminar de analisar, mas ainda carregando sub-resources, e “concluído” depois de carregado. – document.readyState na Mozilla Developer Network

Então, se você precisa apenas que o DOM esteja pronto, verifique document.readyState === "interactive" . Se você precisar que a página inteira esteja pronta, incluindo imagens, verifique document.readyState === "complete" .

Não há necessidade de uma biblioteca. jQuery usou esse script por um tempo, btw.

http://dean.edwards.name/weblog/2006/06/again/

 // Dean Edwards/Matthias Miller/John Resig function init() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); // do stuff }; /* for Mozilla/Opera9 */ if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } /* for Internet Explorer */ /*@cc_on @*/ /*@if (@_win32) document.write(" 

Você provavelmente quer usar algo como jQuery, o que torna a programação JS mais fácil.

Algo como:

 $(document).ready(function(){ // Your code here }); 

Parece fazer o que você está depois.

Se você realmente quer que este código rode no load , e não no domready (ou seja, você precisa que as imagens sejam carregadas também), então infelizmente a function ready não faz isso para você. Eu geralmente faço algo assim:

Inclua no documento javascript (ou seja, sempre chamado antes de onload acionado):

 var pageisloaded=0; window.addEvent('load',function(){ pageisloaded=1; }); 

Então seu código:

 if (pageisloaded) { DoStuffFunction(); } else { window.addEvent('load',DoStuffFunction); } 

(Ou o equivalente em sua estrutura de preferência.) Eu uso este código para fazer precaching de javascript e imagens para futuras páginas. Como as coisas que estou recebendo não são usadas para esta página, não quero que ela tenha precedência sobre o download rápido de imagens.

Pode haver uma maneira melhor, mas ainda não encontrei.

 if(document.loaded) { DoStuffFunction(); } else { if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload', DoStuffFunction); } } 

Mozila Firefox diz que onreadystatechange é uma alternativa ao DOMContentLoaded .

 // alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); } } 

Em DOMContentLoaded o documento da Mozila diz:

O evento DOMContentLoaded é acionado quando o documento foi completamente carregado e analisado, sem esperar que as folhas de estilo, as imagens e as subframes concluam o carregamento (o evento load pode ser usado para detectar uma página totalmente carregada).

Eu acho que load evento de load deve ser usado para um documento completo + carregamento de resources.

O acima com o JQuery é a maneira mais fácil e mais usada. No entanto, você pode usar o javascript puro, mas tente definir esse script no header para que ele seja lido no começo. O que você está procurando é o evento window.onload .

Abaixo está um script simples que eu criei para executar um contador. O contador pára depois de 10 iterações

 window.onload=function() { var counter = 0; var interval1 = setInterval(function() { document.getElementById("div1").textContent=counter; counter++; if(counter==10) { clearInterval(interval1); } },1000); } 

Tente isto:

 var body = document.getElementsByTagName('BODY')[0]; // CONDITION DOES NOT WORK if ((body && body.readyState == 'loaded') || (body && body.readyState == 'complete') ) { DoStuffFunction(); } else { // CODE BELOW WORKS if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload',DoStuffFunction); } } 

Eu tenho outra solução, meu aplicativo precisa ser iniciado quando o novo object do MyApp é criado, assim parece:

 function MyApp(objId){ this.init=function(){ //......... } this.run=function(){ if(!document || !document.body || !window[objId]){ window.setTimeout(objId+".run();",100); return; } this.init(); }; this.run(); } //and i am starting it var app=new MyApp('app'); 

está funcionando em todos os navegadores, que eu conheço.