Question

如果我有一个动态加载的脚本，我希望它在执行代码之前等待DOM准备就绪。但是，如果脚本加载速度太慢，则DOM已经准备就绪，因此DOM-Ready功能将无法运行。

请不要使用框架，我依赖于纯JavaScript。

提前致谢！

Answer 1

没有监听器，没有100％可靠的方法来确保加载整个DOM。你可以这样做：

var myChecker = setInterval(function () {
  var checkElem = document.getElementById('myRefElement');

  if (checkElem != null) {
    clearInterval(myChecker);
    myFunction();
  }
}, 100);

等待你关心的某个目标元素存在。

Answer 2

在这个页面的一部分：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

非常简单 - 将您的脚本放在关闭正文标记之前（如果有的话）。它并不能保证DOM已准备好，但是DOM准备好的监听器比加载监听器更早可靠。

Answer 4

以下是一些纯粹的javascript domready事件：

http://snipplr.com/view/6029/domreadyjs/

http://www.geekdaily.net/2007/07/27/javascript-windowonload-is-bad-mkay/

Answer 5

检查document.readyState

的代码段

http://www.dustindiaz.com/smallest-domready-ever

如何在没有监听器的情况下检查DOM是否准备就绪？

5 个答案: