在网页上可见之前确定DIV高度的最佳方法是什么？

Question

I have a script that will fetch data from server and compose a DIV according to it. The DIV will contain image, text and other undetermined content. I want to arrange it freely, so I need to know its height and width before it is shown to the user.

But per my understanding, I should ask browser to render it firstly, otherwise I can't know the width&height.

Is there any best way to know a DIV's width&height without showing it to user?

EDIT:

Some good guy suggests that I use jquery's .width() method, but I am wondering that if the DIV contains image, will jquery wait after the image is downloaded? I don't know the image's dimension beforehand.

Answer 1

You can set display: none style on the div. Then use .width() from jQuery and you will get this value.

For the duration of the calculation it will use .swap() to set style so element is visible, call callback calculating the width and swap style back.

It will set (see the code ):

• position: absolute
• visiblity: hidden
• display: block

EDIT (see comments):

If you are loading a image and you want to make sure the image is loaded before you calculate the width then you can attach width calculation as the onload handler like this:

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

HERE is a working example.

Answer 2

jQuery is smart enough to calculate the dimensions, but only once injected into the 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();

Also note, A block element <div> will be rendered at screen width, thus not correctly reporting the width of contained elements. To get around this you add these styles to your container: float:left or display:inline-block . Ex:

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

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

Answer 3

set style="display:none"检查宽度，然后显示是否需要

Answer 4

If you set style.display to 'block' and style.visibility to 'hidden' the browser should calculate the sizes, but not show the div .

However, I don't know whether all browsers do this correctly.

Answer 5

The best that I can think of is to very quickly show it (might even be off-screen depending on your situation), then fetch its size, and then to hide it again.

But yes, if the div contains images, these need to be loaded first (or have a width / height set on them) before you know the size of the div container. You can use

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

to only calculate height after the complete page (including images) has been loaded.

Answer 6

I do something similar where the height and width are both unknown. The data that populates the div with display:none is data from a snmp request so there is some time associated with getting and displaying that data. Here is a little snip of code i use to adjust the absolute position based on the height.

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

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