2

¿Como saber si un componente ha cargado, por ejemplo un div y no de la forma tradicional toda la pagina $(document).ready(function() { usando jquery?

Lo intente así pero no funciona el div es este

<div id="calendar">
</div>

$(document).on('load','#calendar',function(){ 
  ShowMe("¡Procesando su reserva!, favor espere un momento.");      
});
3
  • Estás haciendo el load al #edireserva en vez que al #calendar.
    – Kleith
    Commented el 23 abr. 2018 a las 1:10
  • Bueno igual no funciona
    – lucho
    Commented el 23 abr. 2018 a las 1:14
  • ¿Qué es lo que vas a poner dentro del div y cómo lo vas a hacer? O bien ¿por qué te interesa saber que el div se ha cargado?
    – Rubén
    Commented el 23 abr. 2018 a las 2:41

2 respuestas 2

2

El evento que indica que un elemento se ha cargado se llama onload en la especificación de HTML y forma parte de los eventos que W3C Recommendation llama eventos intrínsecos y ocurren cuando el agente de usuario termina de cargar:

  • la ventana (window)
  • el documento (document o DOM)
  • las ventanas frame que no tienen frameset
  • el elemento body

Los elementos div a diferencia de document o de body no tienen un envento onload que escuchar. Y no lo tienen porque no tiene ningún sentido que lo tengan: cuando haces esto en jQuery:

$(function() 
  {
    console.log( "Todo cargado, el div incluido" );
  });

Ya tienes un indicador de que el div se ha cargado.

Si de todos modos quieres simular una especie de div ready puedes:

Recurrir a un atributo data que otorgarías al div y que escucharías en JS.

Aquí, en vez de Hola mundo, podrías incluso poner una función con parámetros y ejecutarla con eval. Además, tiene la ventaja de poder recuperar otros datos del elemento, como el id.

$('[data-onload]').each(function() {
  var elem = $(this);
  var id = elem.prop('id');
  var tipo = elem.prop('nodeName');
  var txt = (tipo == "DIV") ? elem.text() : elem.val();
  var data = elem.data('onload');

  alert("Soy el " + tipo + "  " + id + " | data: " + data + " | texto: "+txt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar" data-onload="Hola mundo">Lorem ipsum dolor sit amet</div>

<input id="txtNombre" data-onload="enviarInput(this.value)" value="Pedro" />

Otra forma sería colocando inmediatamente después del div el código Javascript que quieres que se ejecute.

Veamos dos ejemplos, con un código directo, otro llamando una función:

<script type="text/javascript">
  function onDivReady(msg) 
  {
    alert(msg);
  }
</script>

<div id="myDiv"></div>
<script type="text/javascript">
  alert("div cargado.... un pseudo div ready");
</script>

<div id="myDiv2"></div>
<script type="text/javascript">
  onDivReady("div 2 cargado.... un pseudo div ready con función");
</script>

0

Lo estás haciendo mal, el load() de jQuery se utiliza de la siguiente manera:

<div id="calendar">
</div>

<script type="text/javascript">
  $('#calendar').load(function() {
    ShowMe("¡Procesando su reserva!, favor espere un momento.");
  });
</script>
2
  • Esta mal ese codigo Kleith, no funciona, el objetivo que quiero es que antes que se muestre el div me muestre un progressbar y no es tan descabellado como dicen
    – lucho
    Commented el 23 abr. 2018 a las 1:48
  • Si querés hacer un progress bar entonces lo hubieras aclarado en la pregunta. Leyendo un poco el evento load() es sólo para images, scripts, frames, iframes, y el window object.
    – Kleith
    Commented el 23 abr. 2018 a las 2:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.