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

【问题标题】：Check if a given DOM element is ready检查给定的 DOM 元素是否准备就绪
【发布时间】：2011-07-04 13:03:41
【问题描述】：

有没有一种方法可以使用 jQuery 或 JavaScript 检查给定选择器/元素的 HTML DOM 元素是否已准备好？

查看 jQuery api 的 ready 函数，它看起来只能与文档对象一起使用。如果 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 元素的代码将仅在整个文档准备好后执行，即使它实际上可以更早执行。

【问题讨论】：

为什么要在文档准备好之前执行它？
请问，你为什么需要这个？
我认为尽早执行脚本不会提高网站的整体性能，因为通常情况下，JavaScript 执行会阻止其他内容的加载。你最好的选择是使用$(document).ready。
@nWorx/anasnakawa 我想在某些 HTML 元素准备好时触发一些 AJAX 事件，但其他元素（如表格）强制准备函数等待它们完成加载
有点奇怪，看到有多少人想知道它的用途。有很多基于 JS 的控件纯粹是在运行时创建的。这意味着文档就绪机制将毫无用处。如果使用 createElement() 创建元素，则在调用函数退出之前不会填充元素（例如原型设置）。当您使用传统的构造函数/析构函数模式和 VMT（从 C++、Delphi 等编译时很常见）时，这会导致问题。

标签： javascript jquery

【解决方案1】：

编辑 2012 从 jQuery 1.7.0 开始，live 方法已被弃用。现在建议使用.on() event 附加事件处理程序。这将替换 .bind()、.delegate() 和 .live()。

查看文档：http://api.jquery.com/on/

原答案

我认为jQuery .live() event 可能是您正在寻找的。p>

【讨论】：

这不是一个答案，它是一个文档的链接。如果您不想回答，可以在评论中添加链接。

【解决方案2】：

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

注意：我是用 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>

【讨论】：

【解决方案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
})

【讨论】：

当元素从 DOM 中消失，但稍后可以重新出现时，怎么样？我怎么能抓住这个？

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

以下代码对我有用！

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

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

【讨论】：