Javascript - Come rilevare se il documento è stato caricato (IE 7 / Firefox 3)

Voglio chiamare una funzione dopo che un documento è stato caricato, ma il documento potrebbe non essere stato ancora caricato. Se è stato caricato, posso semplicemente chiamare la funzione. Se NON è stato caricato, posso collegare un listener di eventi. Non riesco ad aggiungere un listener di eventi dopo che onload è già stato attivato poiché non verrà chiamato. Quindi, come posso verificare se il documento è stato caricato? Ho provato il codice qui sotto ma non funziona del tutto. Qualche idea?

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);
    }
}

Non è necessario per tutto il codice menzionato dai galambalaz. Il modo cross-browser per farlo in puro JavaScript è semplicemente testare document.readyState:

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

Questo è anche il modo in cui jQuery lo fa.

A seconda di dove viene caricato JavaScript, questo può essere fatto all'interno di un intervallo:

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

In effetti, document.readyStatepossono avere tre stati:

Restituisce "caricamento" durante il caricamento del documento, "interattivo" al termine dell'analisi ma continua a caricare risorse secondarie e "completamento" dopo il caricamento. - document.readyState su Mozilla Developer Network

Quindi, se hai solo bisogno che il DOM sia pronto, controlla document.readyState === "interactive". Se hai bisogno che l'intera pagina sia pronta, comprese le immagini, controlla document.readyState === "complete".

Non c'è bisogno di una biblioteca. jQuery ha usato questo script per un po ', a proposito.

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("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

Probabilmente vuoi usare qualcosa come jQuery, che semplifica la programmazione JS.

Qualcosa di simile a:

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

Sembrerebbe fare quello che stai cercando.

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

Se vuoi davvero che questo codice venga eseguito al caricamento , non su domready (cioè devi anche caricare le immagini), purtroppo la funzione ready non lo fa per te. In genere faccio semplicemente una cosa del genere:

Includi nel documento javascript (ovvero sempre chiamato prima dell'onload attivato):

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

Quindi il tuo codice:

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

(O l'equivalente nel tuo quadro di preferenze.) Uso questo codice per eseguire il precaching di javascript e immagini per le pagine future. Dato che le cose che sto ricevendo non sono affatto utilizzate per questa pagina, non voglio che abbia la precedenza sul rapido download di immagini.

Potrebbe esserci un modo migliore, ma devo ancora trovarlo.

Mozila Firefox afferma che onreadystatechangeè un'alternativa a DOMContentLoaded.

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

Nel DOMContentLoadeddocumento di Mozila dice:

L'evento DOMContentLoaded viene generato quando il documento è stato completamente caricato e analizzato, senza attendere il completamento del caricamento di fogli di stile, immagini e sottoframe (l'evento di caricamento può essere utilizzato per rilevare una pagina completamente caricata).

Penso che l' loadevento dovrebbe essere usato per un documento completo + caricamento delle risorse.

Quello sopra con JQuery è il modo più semplice e più usato. Tuttavia puoi usare javascript puro ma prova a definire questo script in testa in modo che venga letto all'inizio. Quello che stai cercando è un window.onloadevento.

Di seguito è riportato un semplice script che ho creato per eseguire un contatore. Il contatore si arresta quindi dopo 10 iterazioni

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

}

Prova questo:

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);
    }
}

Ho un'altra soluzione, la mia applicazione deve essere avviata quando viene creato un nuovo oggetto di MyApp, quindi sembra:

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');

funziona su tutti i browser, lo so.