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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

我想在加载文档之后调用一个函数,但是文档可能已经或者可能还没有完成加载。如果它加载了,那么我就可以调用函数了。如果它没有加载,那么我可以附加一个事件侦听器。在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);
    }
}
提问于
用户回答回答于

不需要library。jQuery使用这个脚本

...

// 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;
用户回答回答于

在纯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开发人员网络的readyState

因此,如果你只需要做好DOM准备

扫码关注云+社区

领取腾讯云代金券