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

Question

我有一个脚本可以从服务器获取数据并根据它组成一个 DIV。 DIV 将包含图像、文本和其他未确定的内容。我想自由排列它，所以在显示给用户之前我需要知道它的高度和宽度。

但是根据我的理解，我应该先让浏览器渲染它，否则我无法知道宽度和高度。

有没有什么最好的方法可以在不向用户显示的情况下了解 DIV 的宽度和高度？

编辑:

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

Answer 1

您可以在 div 上设置 display: none 样式。然后使用 jQuery 中的 .width()，您将获得该值。

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

它将设置(参见 code ):

• position:absolute
• 可见性:隐藏
• 显示: block

编辑(见评论):

如果你正在加载一个图像，并且你想确保在计算宽度之前加载图像，那么你可以像这样将宽度计算作为 onload 处理程序附加:

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

HERE 是一个工作示例。