Javascript - 如何检测文档是否已加载(IE 7/Firefox 3)

Question

我想在文档加载后调用函数,但文档可能已经或可能尚未完成加载.如果它加载了,那么我可以调用该函数.如果它没有加载,那么我可以附加一个事件监听器.我无法在onload已经触发后添加一个eventlistener,因为它不会被调用.那么如何检查文档是否已加载？我尝试了下面的代码,但它并不完全有用.有任何想法吗？

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

Answer 1

没有必要使用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可以有三种状态:

在文档加载时返回"加载",在完成解析但仍加载子资源时返回"交互",并在加载后"完成".- Mozilla Developer Network的document.readyState

因此,如果您只需要准备好DOM,请检查document.readyState === "interactive".如果您需要准备好整个页面,包括图像,请检查document.readyState === "complete".

Answer 2

不需要图书馆.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;

Answer 3

您可能希望使用类似jQuery的东西,这使得JS编程更容易.

就像是:

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

似乎做你想做的事.

Answer 4

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

Answer 5

如果你真的希望这个代码在加载时运行,而不是在domready 上运行(即你需要加载图像),那么遗憾的是,ready函数不会为你做.我通常只做这样的事情:

包含在文档javascript中(即在onload触发之前始终调用):

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

然后你的代码:

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

(或者在您的首选框架中的等价物.)我使用此代码来为将来的页面预先缓存javascript和图像.由于我得到的东西根本不用于这个页面,我不希望它优先于快速下载图像.

可能有更好的方法,但我还没有找到它.