자바스크립트 - 문서가 로딩되었는지 여부를 감지하는 방법 (IE 7/Firefox 3)

자바스크립트 - 문서가 로딩되었는지 여부를 감지하는 방법 (IE 7/Firefox 3)

문서가 로드된 후 함수를 호출하려고 하는데, 문서가 아직 로드가 완료되지 않았을 수도 있습니다.만약 로딩이 됐다면, 저는 그냥 그 기능을 호출할 수 있습니다.로드되지 않았다면 이벤트 수신기를 첨부할 수 있습니다.이벤트 수신기가 호출되지 않기 때문에 이미 온로드가 실행된 후에는 추가할 수 없습니다.그럼 문서가 로딩되었는지 확인하려면 어떻게 해야 합니까?아래 코드를 사용해 보았지만 완전히 작동하지 않습니다.무슨 생각 있어요?

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

갈람발라즈가 언급한 모든 코드는 필요 없습니다.순수 자바스크립트로 하는 크로스 브라우저 방법은 단순히 테스트하는 것입니다.document.readyState:

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

jQuery도 이렇게 합니다.

자바스크립트가 로드되는 위치에 따라 간격 내에서 수행할 수 있습니다.

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

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

문서가 로드되는 동안 "loading"을 반환하고, 구문 분석이 완료되었지만 하위 리소스를 로드하는 동안 "interactive"를 반환하며, 로드한 후에는 "complete"를 반환합니다. --document.readyState at Mozilla Developer Network

따라서 DOM만 준비하면 되는 경우, 다음을 확인합니다.document.readyState === "interactive". 이미지를 포함한 전체 페이지 준비가 필요한 경우 다음을 확인합니다.document.readyState === "complete".

도서관은 필요 없습니다. jQuery는 한동안 이 대본을 사용했습니다.

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에서 실행하기를 원한다면(즉, 당신은 이미지를 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();
    }
}

인DOMContentLoaded모질라의 의사는 이렇게 말합니다.

DOM ContentLoaded 이벤트는 문서가 완전히 로드되고 구문 분석되면 발생하며, 스타일시트, 이미지 및 서브프레임이 로드를 완료할 때까지 기다리지 않습니다(로드 이벤트는 완전히 로드된 페이지를 탐지하는 데 사용할 수 있습니다).

생각합니다load이벤트는 전체 문서 + resources 로딩에 사용되어야 합니다.

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

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

언급URL : https://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3