Javascript-문서가로드되었는지 감지하는 방법 (IE 7 / Firefox 3)

문서가로드 된 후 함수를 호출하려고하지만 문서가 아직로드되지 않았을 수도 있습니다. 로드되면 함수를 호출 할 수 있습니다. 로드되지 않으면 이벤트 리스너를 연결할 수 있습니다. 호출되지 않으므로 onload가 이미 실행 된 후에 이벤트 리스너를 추가 할 수 없습니다. 문서가로드되었는지 어떻게 확인할 수 있습니까? 아래 코드를 시도했지만 완전히 작동하지는 않습니다. 어떤 아이디어?

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

galambalazs가 언급 한 모든 코드가 필요하지 않습니다. 순수한 JavaScript로 브라우저 간을 수행하는 방법은 단순히 테스트하는 것입니다 document.readyState.

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

이것은 jQuery가 수행하는 방식이기도합니다.

JavaScript가로드되는 위치에 따라 간격 내에서 수행 할 수 있습니다.

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

실제로 document.readyState세 가지 상태를 가질 수 있습니다.

문서를로드하는 동안 "로드 중", 구문 분석이 완료되었지만 하위 리소스를로드 한 후에는 "대화식",로드 된 후에는 "완료"를 반환합니다. - 모질라 개발자 네트워크에서 document.readyState

따라서 DOM 만 준비해야하는 경우를 확인하십시오 document.readyState === "interactive". 이미지를 포함하여 전체 페이지를 준비해야하는 경우를 확인하십시오 document.readyState === "complete".

도서관이 필요 없습니다. jQuery는이 스크립트를 잠시 동안 사용했습니다 (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;

JS 프로그래밍을 더 쉽게 만드는 jQuery와 같은 것을 사용하고 싶을 것입니다.

다음과 같은 것 :

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

당신이하고있는 일을하는 것 같습니다.

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

실제로이 코드가 domready가 아닌 load 에서 실행되도록 하려면 (즉, 이미지도로드해야 함) 불행히도 ready 함수는이를 수행하지 않습니다. 나는 일반적으로 다음과 같은 일을합니다.

문서 자바 스크립트에 포함합니다 (즉, 항상 onload 발생 전 호출).

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

그런 다음 코드 :

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

(또는 선호하는 프레임 워크에서 이에 해당합니다.)이 코드를 사용하여 향후 페이지에 대한 자바 스크립트 및 이미지 사전 처리를 수행합니다. 내가 받고있는 것들이이 페이지에 전혀 사용되지 않기 때문에 빠른 이미지 다운로드보다 우선하지 않기를 바랍니다.

더 좋은 방법이 있지만 아직 찾지 못했습니다.

모질라 파이어 폭스는 이것이 onreadystatechange대안 이라고 말한다 DOMContentLoaded.

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

에서 DOMContentLoadedMozila의 문서는 말합니다 :

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석 될 때 시작됩니다 (로드 이벤트는 완전히로드 된 페이지를 감지하는 데 사용될 수 있음).

load이벤트는 전체 문서 + 리소스로드에 사용해야 한다고 생각 합니다.

위의 JQuery를 사용하는 것이 가장 쉽고 가장 많이 사용되는 방법입니다. 그러나 순수한 자바 스크립트를 사용할 수 있지만 처음에 읽히도록이 스크립트를 헤드에 정의하십시오. 당신이 찾고있는 것은 window.onload이벤트입니다.

아래는 카운터를 실행하기 위해 만든 간단한 스크립트입니다. 그런 다음 카운터는 10 회 반복 후 중지됩니다.

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

}

이 시도:

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

다른 해결책이 있습니다 .MyApp의 새 객체를 만들 때 응용 프로그램을 시작해야하므로 다음과 같습니다.

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

내가 아는 모든 브라우저에서 작동합니다.