我想在文档加载后调用一个函数,但是文档可能尚未加载完成。如果加载了,那么我可以调用该函数。如果未加载,则可以附加事件监听器。在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);
}
}
不需要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
可以具有三种状态:
文档加载时返回“ loading”,解析完成后返回“ interactive”,但仍加载子资源,加载后返回“ complete”。- document.readyState在Mozilla开发者网络
因此,如果您只需要准备DOM,请检查document.readyState === "interactive"
。如果您需要准备整个页面,包括图像,请检查document.readyState === "complete"
。
无需图书馆。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;
您可能想要使用类似jQuery的工具,这使JS编程更容易。
就像是:
$(document).ready(function(){
// Your code here
});
似乎会做你所追求的。
if(document.readyState === 'complete') {
DoStuffFunction();
} else {
if (window.addEventListener) {
window.addEventListener('load', DoStuffFunction, false);
} else {
window.attachEvent('onload', DoStuffFunction);
}
}
如果您实际上希望此代码在加载时运行,而不是在domready时运行(即,您还需要加载图像),那么很遗憾,ready函数无法为您完成此工作。我通常只是做这样的事情:
包括在文档javascript中(即始终在触发onload之前调用):
var pageisloaded=0;
window.addEvent('load',function(){
pageisloaded=1;
});
然后你的代码:
if (pageisloaded) {
DoStuffFunction();
} else {
window.addEvent('load',DoStuffFunction);
}
(或者在您的首选项框架中,它是等效的。)我使用此代码为将来的页面进行javascript和图像的预缓存。由于我得到的东西根本没有用于此页面,因此我不希望它优先于快速下载图像。
也许有更好的方法,但是我还没有找到它。
Mozila Firefox表示这onreadystatechange
是的替代方案DOMContentLoaded
。
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
在DOMContentLoaded
Mozila的文档中说:
当文档已完全加载和解析时,将触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载(可以使用load事件来检测完全加载的页面)。
我认为load
应该将事件用于完整的文档和资源加载。
上面使用JQuery的方法是最简单且最常用的方法。但是,您可以使用纯javascript,但尝试在头中定义此脚本,以便在一开始就可以读取它。您正在寻找的是window.onload
事件。
以下是我创建的用于运行计数器的简单脚本。然后计数器在10次迭代后停止
window.onload=function()
{
var counter = 0;
var interval1 = setInterval(function()
{
document.getElementById("div1").textContent=counter;
counter++;
if(counter==10)
{
clearInterval(interval1);
}
},1000);
}
尝试这个:
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);
}
}
我还有其他解决方案,当创建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');
我知道,它可以在所有浏览器上使用。
文章标签:addeventlistener , events , javascript , onload
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!