Question

我想用动画GIF替换标准dijit.ContentPane loadingMessage，而不是默认的“Loading ...”消息。

根据文档，默认消息为：

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

所以我用：

覆盖了CSS

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

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

是否有一些更简单的方法（希望通过CSS）使加载图像在窗格中居中？

Answer 1

这样的事情会起作用吗？

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

（还要确保ContentPane本身具有位置：relative或position：absolute）

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

通常替换dijit ContentPane的加载消息

1 个答案: