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

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 you actually want this code to run at load, not at domready (ie you need the images to be loaded as well), then unfortunately the ready function doesn't do it for you. I generally just do something like this:

Include in document javascript (ie always called before onload fired):

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

Then your code:

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

(Or the equivalent in your framework of preference.) I use this code to do precaching of javascript and images for future pages. Since the stuff I'm getting isn't used for this page at all, I don't want it to take precedence over the speedy download of images.

There may be a better way, but I've yet to find it.

---

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

---

Mozila Firefox says that onreadystatechange is an alternative to DOMContentLoaded.

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

In DOMContentLoaded the Mozila's doc says:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

I think load event should be used for a full document+resources loading.

---

The above one with JQuery is the easiest and mostly used way. However you can use pure javascript but try to define this script in the head so that it is read at the beginning. What you are looking for is window.onload event.

Below is a simple script that I created to run a counter. The counter then stops after 10 iterations

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

}

---

Try this:

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

---

I have other solution, my application need to be started when new object of MyApp is created, so it looks like:

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

it is working on all browsers, that i know.

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