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

我想在文档加载后调用函数,但文档可能已经或可能尚未完成加载.如果它加载了,那么我可以调用该函数.如果它没有加载,那么我可以附加一个事件监听器.我无法在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);
    }
}

laurent.. 249

没有必要使用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".

1> laurent..：

---

没有必要使用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".

---

@costa,如果`document.readyState =="完成"`,则表示已加载所有内容,包括图像.

---

我使用```/ loaded|complete/.test(document.readyState)```.有些浏览器将```document.readyState```设置为"loaded"而不是"complete".另外,document.readyState不能确保加载字体,没有插件就没有真正好的方法来测试它.

---

怎么样`document.onreadystatechange`？如果浏览器支持它,这似乎更精简.http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load/25786528#25786528

---

我认为最好检查`document.readyState!=="loading"`,以获取"DOM ready"状态.如果由于某种原因(在"交互"状态之后)检查`readyState`,则可以防止出现问题.

2> gblazex..：

---

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




















    


    

        

            
            

                
                    
                
            

            

                路人甲            

            

                这个屌丝很懒，什么也没留下！            
            
            


                                
                    
                    关注作者
                            

        
    


    

        
Tags | 热门标签
        

            

                                

                    actionscrip
                
                                

                    bash
                
                                

                    c#
                
                                

                    c++
                
                                

                    c语言
                
                                

                    erlang
                
                                

                    flutter
                
                                

                    go
                
                                

                    golang
                
                                

                    java
                
                                

                    javascript
                
                                

                    lua
                
                                

                    node.js
                
                                

                    perl
                
                                

                    php
                
                                

                    python
                
                                

                    scala
                
                                

                    typescript
                
                                

            
        
    


    

        
RankList | 热门文章
        

            

                                

                    1Ng-animate使用$ templateRequest装饰器停止工作
                
                                

                    2用于循环优化的Java
                
                                

                    3Angular将样式应用于ngRepeat中的第一个可见项
                
                                

                    4星号的位置会影响指针吗？
                
                                

                    5Babel v6:如何/我可以编写一个添加新语法的插件(即一个新的运算符)？
                
                                

                    6删除Eloquent记录之间的关系
                
                                

                    7在OCaml中编译和运行
                
                                

                    8应用程序将无法生成错误无法找到可选库
                
                                

                    9为什么Joda和Calendar会打印不同的时间？
                
                                

                    10从UWP和ASP.NET 5引用类库
                
                                

                    11谷歌地图api v3按州计算里程数
                
                                

                    12在UICollectionViewCell上创建视差焦点效果
                
                                

                    13Phoenix应用程序如何仅针对在多台计算机上使用通道规模进行定制？使用HAProxy？如何向所有节点广播消息？
                
                                

                    14一种在Java中创建新实例的有趣方法
                
                                

                    15如何阻止Intellij自动更改尚未编辑的行上的缩进？
                
                                

                    16在Lumen(Laravel)中是否可以使用西里尔符号？
                
                                

                    17对于仅使用JSON的后端REST应用程序,CSRF是强制性的吗？
                
                                

                    18AWS:通过boto3发布Lambda函数的SNS消息(Python2)
                
                                

                    19为什么Getopt :: Long没有初始化任何值？
                
                                

                    20有没有办法在两个兄弟姐妹之间应用CSS样式？