JavaScript - jak wykryć, czy dokument został załadowany (IE 7 / Firefox 3)

Chcę wywołać funkcję po załadowaniu dokumentu, ale załadowanie dokumentu mogło się jeszcze skończyć lub nie. Jeśli się załadował, mogę po prostu wywołać funkcję. Jeśli się NIE załadował, mogę dołączyć detektor zdarzeń. Nie mogę dodać detektora zdarzeń, gdy onload został już uruchomiony, ponieważ nie zostanie wywołany. Jak więc mogę sprawdzić, czy dokument się załadował? Wypróbowałem poniższy kod, ale nie do końca działa. Jakieś pomysły?

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

Nie ma potrzeby, aby cały kod wspomniany przez galambalazs. Aby to zrobić w czystym JavaScript, wystarczy przetestować document.readyState:

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

Tak też robi to jQuery.

W zależności od tego, gdzie ładowany jest JavaScript, można to zrobić w przedziale:

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

W rzeczywistości document.readyStatemoże mieć trzy stany:

Zwraca „ładowanie” podczas wczytywania dokumentu, „interaktywne” po zakończeniu analizowania, ale nadal ładuje zasoby podrzędne, oraz „zakończone” po załadowaniu. - document.readyState w Mozilla Developer Network

Więc jeśli potrzebujesz tylko DOM, aby był gotowy, sprawdź document.readyState === "interactive". Jeśli chcesz, aby cała strona była gotowa, w tym obrazy, sprawdź document.readyState === "complete".

Nie ma potrzeby posiadania biblioteki. Przy okazji, jQuery używał tego skryptu przez jakiś czas.

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;

Prawdopodobnie chcesz użyć czegoś takiego jak jQuery, co ułatwia programowanie w JS.

Coś jak:

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

Wydaje się, że zrobi to, czego szukasz.

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

Jeśli faktycznie chcesz, aby ten kod działał przy ładowaniu , a nie w domready (tj. Potrzebujesz również ładować obrazy), to niestety funkcja ready nie robi tego za Ciebie. Generalnie robię coś takiego:

Uwzględnij w javascript w dokumencie (tj. Zawsze wywoływane przed uruchomieniem onload):

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

Następnie twój kod:

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

(Lub odpowiednik w ramach twoich preferencji.) Używam tego kodu do przygotowania kodu JavaScript i obrazów dla przyszłych stron. Ponieważ to, co otrzymuję, nie jest w ogóle używane na tej stronie, nie chcę, aby miało pierwszeństwo przed szybkim pobieraniem obrazów.

Może jest lepszy sposób, ale jeszcze go nie znalazłem.

Mozila Firefox twierdzi, że onreadystatechangejest to alternatywa dla DOMContentLoaded.

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

W DOMContentLoadeddokumencie Mozili mówi:

Zdarzenie DOMContentLoaded jest wywoływane po całkowitym załadowaniu i przeanalizowaniu dokumentu, bez czekania na zakończenie ładowania arkuszy stylów, obrazów i ramek podrzędnych (zdarzenie load może służyć do wykrywania w pełni załadowanej strony).

Myślę, że loadwydarzenie powinno być używane do pełnego załadowania dokumentu + zasobów.

Powyższy z JQuery jest najłatwiejszym i najczęściej używanym sposobem. Możesz jednak użyć czystego javascript, ale spróbuj zdefiniować ten skrypt w głowie, aby był czytany na początku. To, czego szukasz, to window.onloadwydarzenie.

Poniżej znajduje się prosty skrypt, który utworzyłem, aby uruchomić licznik. Następnie licznik zatrzymuje się po 10 iteracjach

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

}

Spróbuj tego:

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

Mam inne rozwiązanie, moją aplikację trzeba uruchomić przy tworzeniu nowego obiektu MyApp, więc wygląda to tak:

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

działa na wszystkich przeglądarkach, które znam.