Javascript 检查给定的 DOM 元素是否准备就绪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6571890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if a given DOM element is ready
提问by 8bitme
Is there a way of checking if the HTML DOM element/s for a given selector/element are ready yet using jQuery or JavaScript?
有没有办法使用 jQuery 或 JavaScript 检查给定选择器/元素的 HTML DOM 元素是否准备就绪？
Looking at the jQuery apifor the ready function it looks like it can only be used with the document object. If ready cannot be used for this purpose is there another way of doing this?
查看 jQuery api的 ready 函数，它看起来只能与文档对象一起使用。如果 ready 不能用于此目的，还有另一种方法吗？
e.g.
例如
$('h1').ready(function()
{
//do something when all h1 elements are ready
});
Obviously I could use
显然我可以使用
$(document).ready(function()
{
//do something when all h1 elements are ready
});
But if all the h1's load first then the code specific to h1 elements will only execute after the whole document is ready even though it could actually execute earlier.
但是如果首先加载所有 h1，那么特定于 h1 元素的代码只会在整个文档准备就绪后才执行，即使它实际上可以更早执行。
采纳答案by Грозный
Edit 2012The livemethod is deprecated as of jQuery 1.7.0. The .on() eventis now recommended for attaching event handlers. This replaces .bind(), .delegate(), and .live().
编辑 2012该live方法自 jQuery 1.7.0 起已弃用。的。对（）事件，现在建议用于附接的事件处理程序。这取代了 .bind()、.delegate() 和 .live()。
See the docs: http://api.jquery.com/on/
请参阅文档：http: //api.jquery.com/on/
Original Answer
原答案
i think jQuery .live() eventmight be what you're looking for.
我认为jQuery .live() 事件可能是你正在寻找的。
回答by Ansikt
Yes, it is possible: and while it's not native, it is pretty easy to impliment. Just trigger a custom event after the node you're looking for is loaded into the DOM.
是的，这是可能的：虽然它不是原生的，但很容易实现。只需在您要查找的节点加载到 DOM 后触发自定义事件。
Note: I'm writing this in jQuery, which means you have to include jQuery early in the load process, which is a no-no performance wise. That being said, if you already have jQuery high up in your document or if DOM construction is taking a hella long time for you, this might be worthwhile. Otherwise, you're free to write this in vanilla JS to skip the $ dependency.
注意：我是用 jQuery 编写的，这意味着你必须在加载过程的早期包含 jQuery，这是一个禁止性能的明智之举。话虽如此，如果您的文档中已经有 jQuery，或者 DOM 构建对您来说需要很长时间，那么这可能是值得的。否则，您可以自由地在 vanilla 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>
回答by ncubica
-------- 2016 --------
-------- 2016 --------
I came with a possible solution using promises that maybe can help somebody else, I'm using jquerycause I'm lazy :P.
我提出了一个可能的解决方案，使用可能可以帮助其他人的承诺，我正在使用，jquery因为我很懒：P。
Pretty much is waiting until the domexist and then execute the resolve function in the promise:
几乎是等到dom存在，然后在承诺中执行解析函数：
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
})
回答by Yossi Ben Haim
The answer is probably no. from a browser perspective it is probably a bad design and might not even be possible to allow something like this.
答案可能是否定的。从浏览器的角度来看，这可能是一个糟糕的设计，甚至可能不允许这样的事情。
for dynamically inserted elements after the DOM is ready there is the dom event - DOMNodeInserted - that you can use. you can also use the jquery live as mentioned above that probably uses the same event.
对于在 DOM 准备就绪后动态插入的元素，您可以使用 dom 事件 - DOMNodeInserted。您还可以使用上面提到的可能使用相同事件的 jquery live。
回答by N_E
Following piece of code worked for me !
以下代码对我有用！
<print condition="true"></print>
<script>
$('print').load('#',function(){
alert($(this).attr('condition'));
});
</script>
