javascript - 将 Div 的大小设置为与其 Child 相同（在孩子加载之前）

Question

我有一个父 div .photo_container，它包含一个, 并使用它的CSS 属性img扩展到它的尺寸。imgdisplay: inline-block

问题：因为页面上会有很多.photo_containerdiv 并且图像需要一些时间来加载，所以在所有img加载之前，页面将填充微小的未拉伸 div（具有几个 px 的填充），然后扩展以适应img每个一一加载。

是否可以将 div '预拉伸'到正确的大小，以便在其子img加载时不必更改其大小？

这是图像加载之前（丑陋！）和之后的样子的说明。

代码：

<div class="photo_box">
    <img src="..." />
</div>

Answer 1

除非您实际加载图像（在 JS 或 CSS 中），否则无法知道图像尺寸。因此，如果您使用 JS 并动态设置容器尺寸并不重要——您仍然需要先加载图像，因此在一段时间内您将显示“丑陋”的空容器。

因此，将最小尺寸添加到 .photo_container。我看起来至少你所有拇指的宽度是一致的，所以做类似.photo_container { min-width:100px; min-height:50px }. 然后为每个图像添加一个 onLoad 回调，该回调将相应地调整父级的大小。

如果您使用 jQuery，请执行以下操作：

$('.photo_container img').each(function() {
  $(this).bind('load', function() {
    var w = $(this).width(),
        h = $(this).height();
    $(this).parent('.photo_container').attr({ width: w+'px', height: h+'px' });
  }
});