加载图片时的消息

Question

我已经将Nivo滑块包含在我的网站上，并且它工作正常，但我想在图片加载时有一些消息，因为现在页脚被推高，看起来有些混乱。在加载图像时是否有快速添加div或其他内容的方法？

Here is the code。只需点击任何项目。

真的很感激一些帮助。

谢谢！

Answer 1

在正在加载的内容上放置最小高度。它会推倒页脚。

CSS： min-height: 200px;

关于加载消息，有两种方法可以执行此操作。

1. 替换图像加载时的加载消息（AJAX，请参阅jQuery load（））
2. 使用position: absolute在图片后面加载加载消息。示例：http://cssdesk.com/p3h9x

编辑：卢克的想法也有效，但它只适用于加载图像（不是文本）。

Answer 2

显示在加载图像之前使用的一些任意样式？具体而言，最小高度和背景图像直到覆盖时显示。

.nivoSlider img {
    background: url("https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif") no-repeat center center;
    min-height: 300px; /* or whatever you consider a reasonable minimum */
}