在 bootstrap 4 图像上添加一个加载微调器

Question

我有一个带有图像的引导程序 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 。 赠品在这里。 （右键单击 > 将图像另存为...）