¿Cuál es la mejor manera de determinar la altura de un DIV antes de ser visible en la página web?

Question

Tengo una secuencia de comandos que recogerá datos del servidor y redactará un DIV de acuerdo con él. El DIV contendrá imágenes, texto y otro contenido indeterminado. Quiero organizarlo libremente, así que necesito saber su altura y ancho antes de que se muestre al usuario.

Pero según mi entender, debería pedirle al navegador que lo renderice en primer lugar, de lo contrario no puedo saber el ancho & de altura.

¿Hay alguna forma de saber el ancho de un DIV & de alto sin mostrarlo al usuario?

EDIT:

Algunos buen tipo sugiere que el método de jQuery .width() yo uso, pero me pregunto que si el DIV contiene la imagen, se jQuery esperar después de la imagen se descarga? No sé la dimensión de la imagen de antemano.

Answer 1

Puede establecer el estilo display: none en el div. Luego use .width() de jQuery y obtendrá este valor.

Durante la duración del cálculo utilizará .swap() para establecer el estilo, de modo que el elemento esté visible, callback de devolución de llamada que calcule el ancho y cambie el estilo.

Fijará (ver la code):

• posición: absoluta
• visiblity de: oculto
• display: block

EDITAR (véanse los comentarios):

Si está cargando una imagen y quiere t para asegurarse de que la imagen se carga antes de calcular el ancho continuación, puede adjuntar el cálculo anchura que el controlador onLoad como esto:

$('#someImg').load(function() { 
    // image is loaded, you can calculate the width 
    console.log($('#test').width())); 
}); 

HERE es un ejemplo de trabajo.

Answer 2

conjunto style="display:none" ancho de verificación y luego si es necesario mostrar

Answer 3

Si establece style.display a 'block' y style.visibility a 'hidden' el navegador debe calcular los tamaños, pero no muestra la div.

Sin embargo, no sé si todos los navegadores hacen esto correctamente.

Answer 4

jQuery es lo suficientemente inteligente como para calcular las dimensiones, pero solo una vez inyectado en el DOM.

var html = "<span>My Content</span>"; 

//hide your element then insert it into the webpage 
var html_el = $(html).hide(); 
$('body').append(html_el); 

//get width and height 
var width = html_el.width(); 
var height = html_el.height(); 

//Remove element from page if no longer needed 
html_el.remove(); 

Nótese también, un elemento de bloque de <div> se representará en anchura de la pantalla, por lo tanto no informar correctamente la anchura de los elementos contenidos. Para evitar esto, agregue estos estilos a su contenedor: float:left o display:inline-block.Ej:

var html = "<div><h2>heading</h2><input type=\"text\" /></div>"; 

var html_el = $(html).css('float','left').hide(); 

Answer 5

Lo mejor que se me ocurre es mostrar muy rápidamente (incluso podría ser fuera de la pantalla dependiendo de su situación), y luego buscar a su tamaño, y luego para ocultar de nuevo.

Pero sí, si el div contiene imágenes, estas deben cargarse primero (o tener un ancho/alto establecido en ellas) antes de saber el tamaño del contenedor div. Puede usar

$(document).load(function() { calculate height... }) 

para calcular solamente la altura después de que se haya cargado la página completa (incluidas las imágenes).

Answer 6

Hago algo similar donde la altura y el ancho son desconocidos. Los datos que pueblan el div con pantalla: ninguno son datos de una solicitud de SNMP, por lo que hay algún tiempo asociado a la obtención y visualización de esos datos. Aquí hay un pequeño fragmento de código que utilizo para ajustar la posición absoluta en función de la altura.

var height = $('.stripPopupContainer', this).height(); 

    $('.stripPopupContainer', this).css({ 
     left: '-5px', 
     top: '-'+ height + 'px' 
    });