css - 一般替换 dijit ContentPane 的加载消息

Question

我想将标准的 dijit.ContentPane loadingMessage 替换为动画 GIF 而不是默认的“正在加载...”消息。

根据文档，默认消息是:

<span class='dijitContentPaneLoading'>${loadingState}</span>

所以我用以下代码覆盖了 CSS:

.dijitContentPaneLoading {
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

加载 ContentPane 时我可以看到 GIF 和“正在加载...”消息，但问题是因为它只是一个 <span>我似乎无法让它占据整个 Pane 并居中，而是位于左上角并且不显示整个加载图形。我不想覆盖每个 loadingMessage与代码，尤其是我更喜欢使用声明模式。

是否有一些更简单的方法(希望通过 CSS)使加载图像在 Pane 中居中？

Answer 1

这样的东西行得通吗？

.dijitContentPaneLoading {
    display: block;
    position: relative;
    top: 40%;
    background-image: url('../images/loading.gif');
}

(还要确保 ContentPane 本身有 position: relative 或 position:absolute)

当然， Pane 需要有一个固定的高度。如果它只是一个普通的 ContentPane 扩展以适应它的内容，那么浏览器在加载完成之前不会知道高度，因此不可能将加载消息垂直居中。