body onload en jquery

[beni0888]

Hola a todos!!
mi problema es el siguiente, he desarrollado un informe en el que listo los datos de una talba, para ello he creado un div con style="overflow: overflow" para poder hacer scroll sobre los datos y dentro de este div tengo una tabla que contiene los datos. Pues bien, yo al cargar la página establezco un valor para el height de este div contenedor, para que se adapte al alto de la pantalla, el problema surge cuando la tabla muestra pocas filas como resultado de una busqueda por ejemplo, ya que en ese caso div queda vacío (a las celdas de la tabla les tengo puesto un borde para que de aspecto de grid). Para solventar este problema he creado una función que comprueba si el alto de la tabla es menor que el de el contenedor y en tal caso rellena la tabla con celdas vacias hasta alcanzar el alto del contendor, esta función funciona perfectamente cuando se da el caso de que la tabla es más baja que el contenedor, el problema es que cuando no es así también se ejecuta y ofrece un resultado no deseado, creo que el problema es debido a que la llamada a la función la tengo puesta dentro de $(document).ready(function(){ ... }); y cuando se ejecuta la función aún no han terminado de cargarse los datos de la tabla, he probado a ponerla dentro de $("body").load(function(){...}); pero no funciona, alguien tiene alguna alternativa a $(document).ready() que se ejecute cuando hayan terminado de cargarse todos los elementos de la página?
De antemano gracias y un saludo, a continuacion les muestro mi código:

Código Javascript:

$(document).ready(function(){
    parcheListadoIE();
    ajustarAlturaAPantalla("div.listado",$("#cabecera").outerHeight()+$("#menu").outerHeight()+$("h1").outerHeight(true)+$("#botonera").outerHeight()+$("div.datos>table").outerHeight()+20);
    rellenarListado();
});
 
function rellenarListado(){
    while($("div.listado table").outerHeight()<$("div.listado").innerHeight()){
        $("div.listado tr:eq(0)").clone().appendTo("div.listado table").find("td").html("&nbsp;");
    }
    $("div.listado table tr:last").remove();
    $("div.listado").css("height",$("div.listado table").outerHeight());
}
 

[chifliiiii]

Y comprobar que no tenga datos en vez de alto?

Que mire el primer tr o td y se fije si esta vacio y se ejecute.

[beni0888]

Iniciado por chifliiiii

Y comprobar que no tenga datos en vez de alto?

Que mire el primer tr o td y se fije si esta vacio y se ejecute.

eso no me sirve por que puede que la tabla contega datos y aún así la función necesite ejecutarse, por ejemplo si el div contenedor tiene espacio para contener una tabla de 10 filas y la tabla tiene un número de filas menor que 10. Lo que necesito es que la función se ejecute si el alto de la tabla es menor que el de el div que la contiene, pero si la llamada a la función la realizo desde el $(document).ready esta se ejecuta aunque el alto de la tabla sea mayor que el del div y lo que hace es ajustarme el alto del div al de la tabla (esto solo sucede en mozilla, en internet explorer si que lo hace bien). Por esto, lo que necesitaría es que la función se ejecute cuando hayan terminado de cargarse los elementos de la página en lugar de cuando el DOM este listo, ¿alguna idea para hacer esto con jquery? una opcion sería poner la llamada a la función en el atributo onload de la etiqueta body pero esa opción no me gusta ya que prefiero utilizar javascript no intrusivo.

[mayid]

creo que el problema es debido a que la llamada a la función la tengo puesta dentro de $(document).ready(function(){ ... }); y cuando se ejecuta la función aún no han terminado de cargarse los datos de la tabla,

A mi me ha pasado lo mismo pero con imagenes.

Eso de load que intentaste está fuera de contexto. Load está referido a ajax en jquery.

Tendrías que usar onload como atributo de body, o en el bloque javascript.
http://www.desarrolloweb.com/articulos/1319.php
http://www.onlinetools.org/articles/.../chapter4.html

La diferencia entre el metodo javascript puro y el de jquery es que el primero espera a que todo haya cargadol . En cambio, jquery espera a que el dom esté construido, lo cual no implica calculos de width and height no declarados. Si me equivoco, por favor corrijan.

[Dany_s]

Hay 2 métodos load en jquery que depende de los argunmentos que se le pasa.
El evento load http://api.jquery.com/load-event/
El método load de ajax http://api.jquery.com/load/

Fijate que este ejemplo agrega al body un texto cuando la imagen esta cargada completamente, es bastante grande la imagen

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
  $( function(){
    $("img").load( function (){
        $('body').prepend("Imagen cargada");
    });
  })
  </script>
</head>
<body>
    <img src="http://lroc.sese.asu.edu/news/uploads/LROCiotw/M104634241LE_annotated.png">
</body>
</html>
 

[mayid]

Ah! Ok, no lo sabía. Seguí el enlace y dice que se aplica a todo elemento que tenga un src:

This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Así que para tablas no iría bien. Pero el clasico onload si debería funcionar.

[Dany_s]

se puede aplicar a la ventana actual

$(window).load...

¿podrias crear un html limpio con una tabla y postear? por ahi es otro problema porque esto funciona

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $( function(){
        rellenarListado();
    });
 
    function rellenarListado (){
        nuevos = false;
        while( $("div.listado table").outerHeight() < $("div.listado").innerHeight() ){
            nuevos = true;
            $("div.listado tr:eq(0)").clone().appendTo("div.listado table").find("td").html("nuevos");
        }
        if (nuevos)
            $("div.listado table tr:last").remove();
    }
  </script>
  <style>
      div{height:200px; overflow:scroll}
  </style>
</head>
<body>
    <div class="listado">
        <table class="listado">
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
            <tr>
                <td>resultado</td>
                <td></td>
            </tr>
        </table>
    </div>
</body>
</html>