检查给定的DOM元素是否就绪
检查给定的DOM元素是否就绪
提问于 2011-07-04 21:03:41
有没有办法检查给定选择器/元素的HTML DOM元素是否已经使用jQuery或JavaScript准备好了？
查看jQuery api中的ready函数，它看起来只能与document对象一起使用。如果ready不能用于此目的，是否有其他方法可以做到这一点？
例如：
$('h1').ready(function()
{
//do something when all h1 elements are ready
});很明显我可以用
$(document).ready(function()
{
//do something when all h1 elements are ready
});但是，如果所有h1都是先加载的，那么特定于h1元素的代码只会在整个文档准备好之后才会执行，即使它实际上可以更早地执行。
回答 4
Stack Overflow用户
发布于 2014-05-01 06:29:07
是的，这是可能的:虽然它不是原生的，但它很容易实现。只需在您要查找的节点加载到DOM之后触发一个自定义事件。
注意:我是用jQuery编写的，这意味着您必须在加载过程的早期包含jQuery，这是性能上的禁忌。也就是说，如果您的文档中已经有了jQuery，或者如果DOM构造对您来说耗费了很长时间，那么这可能是值得的。否则，您可以使用普通JS编写此代码，以跳过$依赖项。
<!DOCTYPE HTML>
<html><head><title>Incremental DOM Readyness Test</title></head><body>
<script src="/js/jquery.js"></script>
<script>
jQuery(document.body).on("DOMReady", "#header", function(e){
var $header = jQuery(this);
$header.css({"background-color" : "tomato"});
}).on("DOMReady", "#content", function(e){
var $content = jQuery(this);
$content.css({"background-color" : "olive"});
});
</script>
<div class="header" id="header">
<!-- Header stuff -->
</div>
<script>jQuery("#header").trigger("DOMReady");</script>
<div class="content" id="content">
<!-- Body content. Whatever is in here is probably really slow if you need to do this. -->
</div>
<script>jQuery("#content").trigger("DOMReady");</script>
</body></html>Stack Overflow用户
发布于 2016-06-29 08:34:18
- 2016
我带来了一个可能的解决方案，使用承诺，也许可以帮助其他人，我正在使用jquery，因为我很懒:P。
大部分时间都在等待，直到dom存在，然后执行promise中的resolve函数：
var onDomIsRendered = function(domString) {
return new Promise(function(resolve, reject) {
function waitUntil() {
setTimeout(function() {
if($(domString).length > 0){
resolve($(domString));
}else {
waitUntil();
}
}, 100);
}
//start the loop
waitUntil();
});
};
//then you can use it like
onDomIsRendered(".your-class-or-id").then(function(element){
console.log(element); //your element is ready
})Stack Overflow用户
发布于 2011-07-04 21:13:06
答案可能是否定的。从浏览器的角度来看，这可能是一个糟糕的设计，甚至可能不可能允许这样的事情。
对于在DOM准备好之后动态插入的元素，可以使用dom事件- DOMNodeInserted。您也可以像上面提到的那样使用jquery live，它可能使用相同的事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6571890
复制相关文章
相似问题
腾讯云开发者
