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

我想在文档加载之后调用一个函数，但是文档可能已经完成了加载，也可能还没有完成。如果它确实加载了，那么我可以直接调用函数。如果它没有加载，那么我可以附加一个事件侦听器。我不能在 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);
}
}
318740 次浏览
小开

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

比如:

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

看起来会做你想做的事。

小开

如果您实际上希望这段代码在 装弹上运行，而不是在 domready (即您也需要加载图像) ，那么遗憾的是，ready 函数并没有为您做到这一点。我通常只是做这样的事情:

包括在文档 javascript (即总是在 onload 触发之前调用) :

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

然后你的密码是:

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

(或者在你的偏好框架中的等价物。)我使用这段代码为将来的页面预处理 javascript 和图像。因为我得到的东西根本没有用在这个页面上，我不希望它优先于图片的快速下载。

也许有更好的办法，但我还没找到。

小开

不需要库。 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;
小开 
if(document.readyState === 'complete') {
DoStuffFunction();
} else {
if (window.addEventListener) {
window.addEventListener('load', DoStuffFunction, false);
} else {
window.attachEvent('onload', DoStuffFunction);
}
}
小开

不需要 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可以有三种状态:

当文档加载时返回“装载”，一旦完成解析但仍然加载子资源时返回“交互式”，一旦加载完成则返回“完成”。 文档/readyState 在 Mozilla Developer Network

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

小开

使用 JQuery 的上述方法是最简单和最常用的方法。然而，您可以使用纯 javascript，但是尝试在头部定义这个脚本，以便在开始时读取它。你要找的是 window.onload事件。

下面是我为运行计数器而创建的一个简单脚本

window.onload=function()
{
var counter = 0;
var interval1 = setInterval(function()
{
document.getElementById("div1").textContent=counter;
counter++;
if(counter==10)
{
clearInterval(interval1);
}
},1000);


}
小开

我有其他的解决方案，我的应用程序需要启动时，MyApp 的新对象被创建，所以它看起来像:

function MyApp(objId){
this.init=function(){
//.........
}
this.run=function(){
if(!document || !document.body || !window[objId]){
window.setTimeout(objId+".run();",100);
return;
}
this.init();
};
this.run();
}
//and i am starting it
var app=new MyApp('app');

我知道它在所有的浏览器上都能工作。

小开

试试这个:

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loaded') || (body &&  body.readyState == 'complete') ) {
DoStuffFunction();
} else {
// CODE BELOW WORKS
if (window.addEventListener) {
window.addEventListener('load', DoStuffFunction, false);
} else {
window.attachEvent('onload',DoStuffFunction);
}
}
小开

MozilaFirefox 说 onreadystatechange是 DOMContentLoaded的替代品。

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}

在 DOMContentLoaded中 Mozila 的文档说:

当文档已被激发时，将触发 DOMContentLoadedevent 完全加载和解析，而不需要等待样式表、图像, 和子帧来完成加载(加载事件可以用来检测 全载的页面)。

我认为 load事件应该用于一个完整的文档 + 资源加载。


提交答案