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

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

javascript jquery

Javascript 检查给定的DOM元素是否准备就绪,javascript,jquery,Javascript,Jquery,是否有一种方法可以使用jQuery或JavaScript检查给定选择器/元素的HTML DOM元素是否已就绪查看jQuery中的ready函数，它似乎只能与document对象一起使用。如果ready不能用于此目的，是否有其他方法 e、 g 显然我可以用 $(document).ready(function() { //do something when all h1 elements are ready }); 但是，如果先加载所有h1，那么特定于h1元素的代码将仅在整个文档准备就绪后执

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

查看jQuery中的ready函数，它似乎只能与document对象一起使用。如果ready不能用于此目的，是否有其他方法

e、 g

显然我可以用

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

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

Edit 2012 自jQuery 1.7.0起，

live

方法已被弃用。现在建议将用于附加事件处理程序。这将替换.bind（）、.delegate（）和.live（）

见文件：

原始答案

我想这可能就是你想要的。

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

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

是的，这是可能的：虽然它不是本机的，但很容易实现。只需在将要查找的节点加载到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>


增量DOM就绪性测试
jQuery（document.body）.on（“DOMReady”、“#header”，函数（e）{
var$header=jQuery（this）；
$header.css（{“背景色”：“西红柿”}）；
}).on（“DOMReady”，“内容”，函数（e）{
var$content=jQuery（this）；
$content.css（{“背景色”：“橄榄色”}）；
});
jQuery（“#header”）.trigger（“DOMReady”）；
jQuery（“内容”）.trigger（“DOMReady”）；

下面的代码对我有用

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

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


$（'print'）。加载（'#'，函数（）{
警报（$（this.attr（'condition'））；
});

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

为什么您希望在文档准备就绪之前执行它？我可以问一下，为什么您需要这样做？我认为尽可能早地执行脚本不会提高网站的整体性能，因为通常情况下，JavaScript执行会阻止加载其他内容。您最好的选择是使用

$（document）.ready

@nWorx/anasnakawa我想在某些HTML元素准备就绪但其他元素（如tables）强制ready函数等待加载完成时触发一些AJAX事件。奇怪的是，看到有多少人对使用它感到好奇。有很多基于JS的控件纯粹是在运行时创建的。这意味着文档就绪机制将毫无用处。如果使用createElement（）创建元素，则在调用函数退出之前，不会填充该元素（例如原型设置）。当你有一个传统的构造函数/析构函数模式和一个VMT（这是从C++、Delphi等编译时常见的）时，会导致问题。当元素从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
})