在 bootstrap 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。免费赠品here。 （右键单击 > 将图像另存为...）