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

7tofc5zh 于 2023-10-17 发布在 jQuery

关注(0)|答案(6)|浏览(106)

有没有一种方法可以使用jQuery或JavaScript检查给定选择器/元素的HTML DOM元素是否已经准备好了？
查看jQuery api的ready函数，它看起来只能与document对象一起使用。如果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元素的代码将只在整个文档准备好之后才执行，即使它实际上可以更早执行。

jquery

来源：https://stackoverflow.com/questions/6571890/check-if-a-given-dom-element-is-ready

6条答案

按热度按时间

pdtvr36n1#

Edit 2012live方法自jQuery 1.7.0起已弃用。现在建议使用.on() event附加事件处理程序。它取代了.bind（）、.delegate（）和.live（）。

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

原始答案 *

我想jQuery .live() event可能是你要找的。

赞(0）回复(0）举报 2023-10-17

mrzz3bfm2#

是的，有可能：虽然它不是原生的，但很容易被植入。只需在您要查找的节点加载到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>

赞(0）回复(0）举报 2023-10-17

tpgth1q73#

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

赞(0）回复(0）举报 2023-10-17

h5qlskok4#

答案可能是否定的。从浏览器的Angular 来看，这可能是一个糟糕的设计，甚至可能不允许这样的事情。
对于DOM准备好后动态插入的元素，可以使用dom事件- DOMNodeInserted。你也可以使用上面提到的jquery live，它可能使用相同的事件。

赞(0）回复(0）举报 2023-10-17

cs7cruho5#

下面的代码为我工作！

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

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

赞(0）回复(0）举报 2023-10-17

icomxhvb6#

对于vanilla JS，我已经使用过这个片段很多次了，效果很好，特别是在页面负载很大的页面上。该脚本将循环（在本例中为50次），并不断检查要查询的元素是否已加载到DOM中，然后执行代码。

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

赞(0）回复(0）举报 2023-10-17

我来回答

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

6条答案

相关问题

热门标签

最新问答