javascript domready?

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

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

我知道我可以使用不同的框架,如原型或jQuery来附加一个函数的window.onload,但不是我在找什么。

我需要类似.readyState的东西,以便我可以这样做:

if(document.isReady){
  var id = document.getElem ...
}

除了使用框架之外,还有其他方法吗?

提问于
用户回答回答于

我已经更新了DOMAssistant库的代码,它可以正常工作

var domReady = (function (){
  var arrDomReadyCallBacks = [] ;
  function excuteDomReadyCallBacks(){
       for (var i=0; i < arrDomReadyCallBacks.length; i++) {
         arrDomReadyCallBacks[i]();
       }
       arrDomReadyCallBacks = [] ;
  }

  return function (callback){
    arrDomReadyCallBacks.push(callback);
     /* Mozilla, Chrome, Opera */
      if (document.addEventListener ) {
          document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
      }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */

    window.onload = excuteDomReadyCallBacks;
}
})()
用户回答回答于

随着2018年临近我们,我认为听取这个DOMContentLoaded事件是安全的。

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

请注意,该活动只会在您的网页加载时触发一次!如果您必须支持真正的旧浏览器,请查看下面放在一起的超轻量级脚本。

仅供历史参考:

jQuery有一个未公开的属性,名为isReady,它在内部用于确定DOM ready事件是否已经触发:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

我从1.5.2开始回到1.3.2,房产就在那里。虽然没有文档,但我会说你可以在未来版本的jQuery中依赖这个属性。

v1.9,他们仍然使用$.isReady- 仍然没有记录

v2.0,所有它的“重大”更改,仍然使用$.isReady- 仍然没有记录

v3.x仍然使用$.isReady- 仍然没有记录

正如几个人指出的,上述并没有真正回答这个问题。所以我刚刚创建了一个微型DOM就绪片段,其灵感来自于Dustin Diaz的更小的DOM准备片段。Dustin创建了一个简洁的方式来检查文档readyState,其中包含以下内容:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

这样做的原因是因为浏览器有3种加载状态:“加载”,“交互式”和“完整” (旧的WebKit也使用“加载”,但不必担心这一点)。您会注意到“加载”和“交互式”都包含文本“in”...所以如果在内部找到字符串“in” document.readyState,那么我们知道我们还没有准备好。

扫码关注云+社区