在引导程序4图像的顶部添加一个加载微调器

Question

我有一个bootstrap 4页面，其中有一个图像，用户可以通过几个下拉菜单来更改该图像。根据选定的选项，将更改图像源。图像相当大，因此加载请求的图像需要一些时间。我想在加载新图像时在图像顶部显示一个加载微调器，这样用户就知道他们的操作有一些效果。

似乎内置的引导程序微调器需要自己的div，所以我认为如果将这样的gif放在图像顶部，也可以工作：https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp但是，我不知道如何将它放在图像的顶部，并触发显示/隐藏它所需的事件。由于我的列不是固定宽度的，我希望在图像顶部显示微调器，而不是将图像源替换为微调器，这样所有内容都会保持在正确的位置。

示例代码：

<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-auto" style="background-color:red;">
<h2>Column 1</h2>
</div>
<div class="col-12 col-lg-auto" style="background-color:green;" >
<h2 class="header-2">Column 2</h2>
<img class="img-fluid" src="https://via.placeholder.com/500x350">
</div>
<div class="col-12 col-lg-auto" style="background-color:blue;">
<h2>Column 3</h2>
</div>
</div>
</div>

Answer 1

首先，在标签后面添加以下内容：

<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和图像的样式类添加到CSS:中

#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}

然后，将此javascript添加到您的页面(当然，最好是在页面末尾，在关闭</body>标记之前(：

$(window).load(function() {
$('#loading').hide();
});
</script>

最后，使用样式类调整加载图像的位置和加载div的background-color。

就是这样，应该还可以。但当然，你必须在某个地方拥有ajax-loader.gif。这里有免费赠品。(右键单击>将图像另存为…(