Question

有没有办法使用jQuery或JavaScript检查给定选择器/元素的HTML DOM元素是否已准备就绪？

查看jQuery api的ready函数，看起来它只能与文档对象一起使用。如果准备好不能用于此目的还有另一种方法吗？

e.g。

 $('h1').ready(function()
{
 //do something when all h1 elements are ready
});

显然我可以使用

$(document).ready(function()
{
 //do something when all h1 elements are ready
});

但如果首先加载所有h1，那么特定于h1元素的代码只会在整个文档准备就绪后执行，即使它实际上可以先执行。

Answer 1

修改2012 从jQuery 1.7.0开始，不推荐使用live方法。现在建议.on() event用于附加事件处理程序。这取代了.bind（）,. delegate（）和.live（）。

请参阅文档：http://api.jquery.com/on/

原始答案

我认为jQuery .live() event可能就是你想要的。

Answer 2

是的，这是有可能的：虽然它不是原生的，但它很容易被恭维。只需在您要查找的节点加载到DOM后触发自定义事件。

注意：我在jQuery中写这个，这意味着你必须在加载过程的早期包含jQuery，这是一个不可行的性能。话虽这么说，如果你已经在你的文档中高高举起jQuery，或者你的DOM构建需要很长时间，那么这可能是值得的。否则，你可以在vanilla JS中自由编写这个来跳过$ dependency。

<!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>

Answer 3

-------- 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
})

Answer 4

答案可能是否定的。从浏览器的角度来看，它可能是一个糟糕的设计，甚至可能不允许这样的东西。

对于DOM准备就绪后的动态插入元素，可以使用dom事件 - DOMNodeInserted。您也可以使用上面提到的jquery live，它可能使用相同的事件。

Answer 5

以下代码为我工作了！

<print condition="true"></print> 

   <script>
    $('print').load('#',function(){
        alert($(this).attr('condition')); 
     });
   </script>

检查给定的DOM元素是否准备就绪

5 个答案: