Comprueba si un elemento DOM dado está listo

¿Hay alguna manera de verificar si los elementos HTML DOM para un selector/elemento determinado están listos aún usando jQuery o JavaScript?Comprueba si un elemento DOM dado está listo

Al mirar el jQuery api para la función de listo, parece que solo se puede usar con el objeto del documento. Si listo no se puede usar para este propósito, ¿hay otra forma de hacerlo?

p. Ej.

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

Obviamente podría utilizar

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

Pero si toda la carga de la h1 primero y luego el código específico a los elementos H1 sólo se ejecutará después de todo el documento está listo a pesar de que en realidad podría ejecutar antes.

Fuente

2011-07-04 8bitme

¿Por qué quieres para ejecutarlo antes que el documento está listo? – nWorx

puedo preguntar, ¿por qué necesita esto? –

No creo que tener el script ejecutado tan pronto como sea posible mejorará el rendimiento general de su sitio web, ya que, en general, la ejecución de JavaScript bloquea la carga de otros contenidos. Su mejor opción es usar '$ (document) .ready'. – FishBasketGordo

Edición 2012 El método live está obsoleta de jQuery 1.7.0. El .on() event ahora se recomienda para adjuntar controladores de eventos. Esto reemplaza a .bind(), .delegate() y .live().

Consulte los documentos: respuesta http://api.jquery.com/on/

original

Creo jQuery .live() event podría ser lo que estás buscando.

Fuente

2011-07-04 13:07:56 Tsar

esto no es una respuesta, es un enlace a un documento . puede poner un enlace en un comentario si no quiere responder. – user3738936

La respuesta es probablemente no. desde la perspectiva del navegador, probablemente sea un mal diseño y quizás ni siquiera sea posible permitir algo como esto.

para elementos insertados dinámicamente después de que el DOM esté listo, existe el evento dom - DOMNodeInserted - que puede usar. también puede usar el jquery live como se mencionó anteriormente que probablemente usa el mismo evento.

Fuente

2011-07-04 13:13:05

Sí, es posible: y aunque no es nativo, es bastante fácil de implementar. Simplemente active un evento personalizado después de que el nodo que está buscando se cargue en el DOM.

Nota: Estoy escribiendo esto en jQuery, lo que significa que debe incluir jQuery al principio del proceso de carga, que es un rendimiento nulo. Dicho esto, si ya tiene jQuery en lo alto de su documento o si la construcción de DOM le está tomando mucho tiempo, podría valer la pena. De lo contrario, puede escribir esto en JS vainilla para omitir la dependencia $.

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

Fuente

2014-04-30 22:29:06 Ansikt

¡El siguiente código me ha funcionado!

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

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

Fuente

2015-10-30 13:58:00

-------- -------- 2016

Vine con una posible solución con promesas que tal vez puedan ayudar a alguien más, estoy usando porque yo jquery soy perezoso: P.

Más o menos se espera hasta que el dom existen y luego ejecutar la función de determinación de la promesa:

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

Fuente

2016-06-29 00:34:17 ncubica

¿Qué sucede cuando el elemento desaparece de DOM, pero puede reaparecer más tarde? ¿Cómo puedo atrapar esto? – paskl

Comprueba si un elemento DOM dado está listo

Respuesta

Cuestiones relacionadas