Javascript - Belgenin yüklü olup olmadığını belirleme (IE 7 / Firefox 3)

Belge yüklendikten sonra bir işlevi çağırmak istiyorum, ancak belge henüz yüklemeyi bitirmiş veya bitirmemiş olabilir. Eğer yüklendiyse, sadece fonksiyonu çağırabilirim. Yüklemediyse, bir olay dinleyicisi ekleyebilirim. Onload çağrılmadığından zaten tetiklendikten sonra bir eventlistener ekleyemiyorum. Peki belgenin yüklenip yüklenmediğini nasıl kontrol edebilirim? Aşağıdaki kodu denedim ama tamamen çalışmıyor. Herhangi bir fikir?

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

Galambalazlar tarafından bahsedilen tüm koda gerek yoktur. Saf JavaScript'te yapmanın çapraz tarayıcı yolu basitçe test etmektir document.readyState:

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

Ayrıca jQuery bunu yapar.

JavaScript'in nereye yüklendiğine bağlı olarak, bu bir aralık içinde yapılabilir:

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

Aslında, document.readyStateüç eyalet olabilir:

Belge yüklenirken "yükleme", ayrıştırmayı bitirip yine de alt kaynakları yüklemeyi tamamladıktan sonra "etkileşimli" ve yüklendikten sonra "tamam" değerini döndürür. - Mozilla Developer Network şirketinde document.readyState

Dolayısıyla, yalnızca DOM'nin hazır olması gerekiyorsa, kontrol edin document.readyState === "interactive". Sayfanın hazır olması için resimler de dahil olmak üzere tüm öğeleri kontrol edin document.readyState === "complete".

Kütüphaneye gerek yok. jQuery bu komut dosyasını bir süre kullanmıştır, 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;

Muhtemelen JS programlamayı kolaylaştıran jQuery gibi bir şey kullanmak istersiniz.

Gibi bir şey:

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

Sonra ne yapmak gibi görünüyor.

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

Bu kodun aslında yükte çalışmasını istiyorsanız , şu anda değil (yani resimlerin de yüklenmesi gerekir), ne yazık ki hazır işlevi sizin için yapmaz. Genellikle böyle bir şey yapıyorum:

Belge javascript'ine dahil et (yani her zaman onload ateşlemeden önce çağrılır):

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

Sonra kodunuz:

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

(Ya da tercih çerçevenizdeki eşdeğeri.) Bu kodu, gelecekteki sayfalar için javascript ve resimlerin önbelleğe alınması için kullanıyorum. Aldığım şeyler bu sayfa için hiç kullanılmadığından, görüntülerin hızlı bir şekilde indirilmesine öncelik vermesini istemiyorum.

Daha iyi bir yol olabilir, ama henüz bulamadım.

Mozila Firefox bunun onreadystatechangebir alternatif olduğunu söylüyor DOMContentLoaded.

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

In DOMContentLoadedMozila doc diyor ki:

DOMContentLoaded olayı, stil sayfaları, resimler ve alt çerçevelerin yüklenmesini bitirmesini beklemeden belge tamamen yüklendiğinde ve ayrıştırıldığında tetiklenir (load olayı tam yüklü bir sayfayı algılamak için kullanılabilir).

loadOlayın tam belge + kaynak yüklemesi için kullanılması gerektiğini düşünüyorum .

JQuery ile yukarıda olan en kolay ve en çok kullanılan yoldur. Ancak saf javascript kullanabilirsiniz, ancak başından okunması için bu komut dosyasını kafada tanımlamaya çalışın. Aradığın şey window.onloadolay.

Aşağıda bir sayaç çalıştırmak için oluşturduğum basit bir komut dosyası var. Sayaç 10 tekrardan sonra durur

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

}

Bunu dene:

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

Başka bir çözümüm var, Uygulamamın yeni uygulaması oluşturulduğunda başlatılması gerekiyor, bu yüzden şöyle görünüyor:

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

bildiğim tüm tarayıcılarda çalışıyor.