javascript - 检查 DOM 是否准备就绪是否过度?

标签 javascript dom document-ready onready

我正在开发一个平台,用于使用网络技术开发桌面应用程序。在这样做的过程中,我一直在尝试让一些文档/就绪功能与我将集成到平台中的浏览器一起使用。这就是为什么我之前在 SO 上问过这个问题:javascript-framework-that-primarily-provides-just-document-onready-functionality

但是我一直无法选择我的浏览器(嘘,这是一个 secret ;)以成功利用一个建议的功能,并且只能回答上述问题。因此,在试图弄清楚什么可能有效的过程中,我偶然发现了以下内容。

下面的代码在我使用的这个浏览器中具有相同的效果,只需在 1 毫秒超时后执行一个函数:我可以在加载大图像时写入 DOM。这对我来说可能不是最终的解决方案,我可能会写一些具体的内容来说明 Javascript 引擎如何为这个浏览器实现 DOM 功能。

尽管如此,我决定看看这是否适用于标准浏览器,令我惊讶的是,它确实适用!鉴于此,我的问题是:各种 Javascript 框架提供的 dom/readiness 功能的各种实现是否只是矫枉过正?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
setTimeout(function() {
    var txtNode = document.createTextNode("ready_yet?");
    var ready_yet_el = document.getElementById("ready_yet");
    ready_yet_el.appendChild(txtNode);
},1);
</script>
</head>

<body>
<div id="ready_yet"></div>
<img src="http://www.ryanmorr.com/tests/ondomready/pic.jpg" />
</body>

</html>

编辑/进一步的想法 在 the page linked to by the answer to my previous related question它指出“对于 Firefox 和 Opera,事件类型的简单检查将确定它是否为 DOMContentLoaded。Safari 和 IE 将检查文档的就绪状态......最后,如果所有其他方法都失败,onload 事件将出现在后面。 “也许类似于我上面的 setTimeout 的 setInterval 可能是倒数第二个行动方案,在依赖 onload 作为最后的手段之前?无论如何,对于我选择的可嵌入浏览器,DOMContentLoaded 事件和 document.readyState 似乎都不受支持。

最佳答案

您的直觉是好的,而且在我看来是有根据的。但是someone has beat you to the punch already .简短的回答是 setTimeout 不是在所有情况下检测 DOM 准备情况的有效实现。对于您感兴趣的浏览器来说可能没问题,但 IE 在某些情况下会失败。

您可能会对 Microsoft 自己的 ASP.NET AJAX 框架使用 setTimeout 技巧来检测 DOM 准备情况感兴趣。惊喜,惊喜:it fails in certain use cases as well .

简而言之,问题似乎出在 IE 加载脚本缓慢,这可能是由于文件大小过大(例如 ~500K)或网络/服务器延迟所致。

关于javascript - 检查 DOM 是否准备就绪是否过度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1381481/

相关文章:

javascript - 将字符串解析为 DOM

javascript - 需要一些关于 jQuery DOMready 的解释

javascript - 元素上的 jQuery.ready() 等效事件监听器?

javascript - 如何从 $.getjson 获取数据

javascript - jquery/html 插值

javascript - Mouseenter 事件仅针对 d3.js svg 圆触发一次

javascript - jquery:父模式对话框文本框不可编辑

javascript - 为什么jQuery或诸如getElementById之类的DOM方法找不到元素?

javascript - 为什么 removeChild 需要父节点?

javascript - jQuery $(document).ready () 触发两次