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

Question

我有一个脚本,它将从服务器获取数据并根据它编写DIV.DIV将包含图像,文本和其他未确定的内容.我想自由地安排它,所以我需要知道它的高度和宽度才能显示给用户.

但根据我的理解,我应该先要求浏览器渲染它,否则我无法知道宽度和高度.

有没有最好的方法来了解DIV的宽度和高度而不向用户显示？

编辑:

一些好人建议我使用jquery的.width()方法,但我想知道如果DIV包含图像,jquery会在下载图像后等待吗？我事先并不知道图像的尺寸.

Answer 1

您可以display: none在 div 上设置样式。然后.width()从jQuery使用，你将得到这个值。

在计算期间，它将用于.swap()设置样式，以便元素可见，调用回调计算宽度并交换样式。

它将设置（参见代码）：

编辑（见评论）：

如果您正在加载图像并且希望在计算宽度之前确保图像已加载，那么您可以将宽度计算附加为 onload 处理程序，如下所示：

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

这是一个工作示例。