Javascript - So erkennen Sie, ob das Dokument geladen wurde (IE 7 / Firefox 3)

Ich soll eine Funktion aufgerufen wird, nachdem ein Dokument geladen wird, aber das Dokument kann oder nicht beendet haben, laden noch. Wenn es zu laden, dann kann ich nur die Funktion aufrufen. Wenn es NICHT geladen, dann kann ich fügen Sie einen Ereignis-listener. Ich kann nicht fügen Sie ein eventlistener nach onload bereits ausgelöst, da Sie nicht aufgerufen. Also, wie kann ich überprüfen, ob das Dokument geladen hat? Ich habe versucht den code unter, aber es nicht ganz funktioniert. Irgendwelche Ideen?

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

InformationsquelleAutor der Frage Marcos | 2009-06-11

234

Gibt es keine Notwendigkeit für den code erwähnt galambalazs. Die cross-browser Weg, es zu tun in reinem JavaScript ist einfach zu testen document.readyState:
```
if (document.readyState === "complete") { init(); }
```
Dies ist auch, wie jQuery das macht.

Je nachdem, wo das JavaScript geladen wird, kann dies innerhalb eines Intervalls:
```
var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);
```
In der Tat document.readyState können drei Zustände:

Gibt "loading", während das Dokument geladen wird, "interaktiv", wenn es fertig ist Parsen, aber immer noch loading sub-Ressourcen, und "complete", sobald es geladen wurde.
-- Dokument.readyState bei Mozilla Developer Network

Also, wenn Sie brauchen nur den DOM fertig zu sein, überprüfen Sie für document.readyState === "interactive". Wenn Sie die ganze Seite, bereit zu sein, einschließlich Bilder, überprüfen Sie document.readyState === "complete".

InformationsquelleAutor der Antwort this.lau_

Keine Notwendigkeit für eine Bibliothek. jQuery verwendet, dieses Skript für eine Weile, 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("<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;

InformationsquelleAutor der Antwort galambalazs

15

Du willst wohl so etwas wie jQuery, das macht JS-Programmierung einfacher.

Etwas wie:
```
$(document).ready(function(){
   //Your code here
});
```
Scheint zu tun, was Sie sind nach.

InformationsquelleAutor der Antwort dan
5

Wenn Sie wirklich wollen, diesen code zu laufen ladennicht bei domready (dh Sie müssen die Bilder geladen werden), dann leider die ready-Funktion nicht, es für Sie tun. Ich in der Regel nur etwas wie das hier tun:

Enthalten im Dokument-javascript (ie immer aufgerufen, bevor onload gefeuert):
```
var pageisloaded=0;
window.addEvent('load',function(){
 pageisloaded=1;
});
```
Dann code:
```
if (pageisloaded) {
 DoStuffFunction();
} else {
 window.addEvent('load',DoStuffFunction);
}
```
(Oder den Gegenwert in Ihrem Rahmen den Vorzug.) Ich benutze diesen code zu tun Zwischenspeicherung von javascript und Bildern für zukünftige Seiten. Da die Sachen, die ich bekommen hab ist nicht für diese Seite an alle, ich will nicht, dass es Vorrang vor dem schnellen download der Bilder.

Kann es einen besseren Weg, aber ich habe noch, es zu finden.

InformationsquelleAutor der Antwort Nathan Stretch

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

InformationsquelleAutor der Antwort Jman

3

Mozila Firefox sagt, dass onreadystatechange ist eine alternative zu DOMContentLoaded.
```
//alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}
```
In DOMContentLoaded den Mozila doc sagt:

Dem DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument wurde
komplett geladen und geparst, ohne zu warten, für stylesheets, Bilder,
und Teilbilder geladen (load-Ereignis kann verwendet werden, zu erkennen
eine vollständig geladene Seite).

Ich denke load Ereignis sollte genutzt werden für eine vollständige Dokumentation+Ressourcen laden.

InformationsquelleAutor der Antwort Mostafa Talebi
3

Oben mit JQuery ist das einfachste und meist genutzte Weg. Allerdings können Sie verwenden reines javascript, aber versuchen zu definieren, dieses Skript in den Kopf, so dass es zu Lesen am Anfang. Was du suchst ist window.onload Veranstaltung.

Unten ist ein einfaches Skript, das ich erstellt und führt einen Zähler. Der Zähler Stoppt dann nach 10 Iterationen
```
window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}
```
InformationsquelleAutor der Antwort Talha

Versuchen Sie dies:

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

InformationsquelleAutor der Antwort smit

Habe ich eine andere Lösung, meine Anwendung muss gestartet werden, wenn neue Objekt MyApp erstellt, so wie es aussieht:

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

es funktioniert auf allen Browsern, die ich kenne.

InformationsquelleAutor der Antwort vitus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.