Javascript – 如何检测文档是否已经加载（IE 7 / Firefox 3）

我想在文档加载后调用一个函数，但文档可能已经完成，也可能没有完成加载。 如果确实加载了，那么我可以调用这个函数。 如果它没有加载，那么我可以附加一个事件监听器。 我不能添加一个事件侦听器，因为它不会被调用。 那么如何检查文档是否已经加载？ 我尝试了下面的代码，但它不完全工作。 有任何想法吗？

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); } } 

Answer 1

galambalazs提到的所有代码都不需要。 在纯JavaScript中使用跨浏览器的方式仅仅是testingdocument.readyState ：

 if (document.readyState === "complete") { init(); } 

这也是jQuery如何做到这一点。

取决于JavaScript的加载位置，这可以在一个时间间隔内完成：

 var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { clearInterval(readyStateCheckInterval); init(); } }, 10); 

实际上， document.readyState可以有三种状态：

在文档加载时返回“加载”，一旦完成parsing，但仍然加载子资源，则为“交互式”，一旦加载，则“完成”。 – Mozilla开发者networking上的document.readyState

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

Answer 2

不需要图书馆。 顺便说一句，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; 

Answer 3

你可能想要使用像jQuery，这使得JS编程更容易。

就像是：

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

似乎要做你以后的事情。

Answer 4

如果你真的想要这个代码在加载时运行，而不是在domready（即你也需要加载图像），那么不幸的是，ready函数并不适合你。 我通常只是做这样的事情：

包含在文档的JavaScript（即总是调用onload被释放之前）：

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

那么你的代码：

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

（或在您的偏好框架等效）。我使用此代码来为未来的页面JavaScript和图像进行预传。 由于我得到的东西根本不用于这个页面，我不希望它优先于图像的快速下载。

可能有更好的方法，但我还没有find它。

Answer 5

 if(document.loaded) { DoStuffFunction(); } else { if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload', DoStuffFunction); } } 

Answer 6

Mozila Firefox说， onreadystatechange是DOMContentLoaded的替代scheme。

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

在DOMContentLoaded ，Mozila的文档说：

DOMContentLoaded事件在文档被完全加载和parsing时触发，不需要等待样式表，图像和子帧完成加载（加载事件可以用来检测完全加载的页面）。

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

Answer 7

上面的JQuery是最简单和最常用的方法。 但是，您可以使用纯JavaScript，但是尝试在头部定义此脚本，以便在开始时读取它。 你在找什么是window.onload事件。

下面是一个简单的脚本，我创build运行一个计数器。 然后计数器在10次迭代之后停止

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

Answer 8

尝试这个：

 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); } } 

Answer 9

我有其他的解决scheme，我的应用程序需要启动时，MyApp的新对象创build，所以它看起来像：

 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'); 

它正在所有浏览器上工作，我知道。