检索异步内容之前的引导程序容器最小高度

Question

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

采用经典布局 - 页眉 - 正文 - 页脚。

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

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

Answer 1

在 div.

的包装中添加 loading class 可能是个好主意

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 class.

检索异步内容之前的引导程序容器最小高度

boostrap container minimal height before async content is retrieve

html

css

asynchronous

bootstrap-grid