在检索异步内容之前，boostrap容器的最小高度

Question

我使用angular5开发一个页面web应用程序，我使用bootstrap4进行页面布局。

有一个clasic布局 - 标题 - 正文 - 页脚。

将动态数据（图像）检索到图库到正文容器时，我遇到了问题。当用户重定向到图库页面时，会将异步请求分派到数据库。同时身体容器是空的，所以它的高度为零，用户可以在页脚正上方看到标题。

使用异步内容为容器设置最小高度的最佳做法是什么？

Answer 1

向包装div添加loading类可能是个好主意。

HTML：

<div id="image-wrapper" class="loading">
</div>

CSS：

.loading {
    min-height:500px;
    background-image:url('img/loading-indicator.gif');
    background-position:center;
    background-repeat:no-repeat;
}

然后，您可以向异步加载添加回调，以添加已加载的内容，并删除loading类。