有没有一种方法可以使用jQuery或JavaScript检查给定选择器/元素的HTML DOM元素是否已准备好？
查看jQuery的api就绪函数，似乎只能与文档对象一起使用。如果无法使用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元素的代码将只会在整个文档准备就绪后才执行，即使它实际上可以更早地执行。
2012年编辑
live方法自jQuery 1.7.0版本起已被弃用。现在建议使用.on()事件来附加事件处理程序，以替代.bind()、.delegate()和.live()方法。
请参阅文档：http://api.jquery.com/on/
原始回答
我认为jQuery .live()事件可能是你要找的。
是的，这是可能的：虽然它不是本地实现，但实现起来相当容易。只需在加载到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>
-------- 2016 --------
我提供了一个使用 Promise 的可能解决方案，希望能对其他人有所帮助。我使用了 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
})
答案可能是否定的。从浏览器的角度来看，这可能是一个糟糕的设计，甚至可能不可能允许这样的事情发生。
对于在 DOM 准备就绪后动态插入的元素，可以使用 DOMNodeInserted 事件。您还可以使用上面提到的 jQuery live，它可能使用相同的事件。
以下代码对我有效！
<print condition="true"></print>
<script>
$('print').load('#',function(){
alert($(this).attr('condition'));
});
</script>
<script>
var countdown = 50; // SET THE NUMBER OF LOOPS
var counter = 0; // START AT ZERO
var setTimer; // DECLARE THE TIMER
function cleartesttimer() {
// STOP THE TIMER FUNCTION
clearInterval(setTimer);
}
var runCode = function() {
// RUN THE QUERY
counter += 1;
var element = document.querySelector("THE_ELEMENT_YOU_WANT_TO_CHECK_HAS_LOADED");
// YOU CAN ADD MORE ELEMENTS HERE
if (element != null) {
// IF THE ELEMENT EXISTS
cleartesttimer(); // STOP THE TIMER
runPage(); // EXECUTE YOUR CODE
} else {
if (counter == countdown) {
// WE REACHED THE NUMBER OF LOOPS
cleartesttimer(); // STOP THE TIMER
}
}
};
// RUN THE CODE
function runPage() {
// DO SOMETHING
}
setTimer = setInterval(runCode, 100); // RUN THE QUERY EVERY 1/10TH SECOND
</script>
$(document).ready。 - FishBasketGordo