Javascript 在引导4映像的顶部添加加载微调器

我有一个bootstrap4页面，其中有一个图像，用户可以通过与几个下拉列表交互来更改该图像。根据选定的选项，图像源将被更改。图像相当大，因此加载请求的图像需要一些时间。我希望在加载新图像时，在图像顶部显示一个加载微调器，以便用户知道他们的操作有一定效果

似乎内置的引导微调器需要自己的div，所以我认为这样的gif如果放在图像的顶部就可以了：但是，我不知道如何将它放在图像的顶部并触发显示/隐藏它所需的事件。因为我的列不是固定宽度的，所以我希望在图像顶部显示微调器，而不是将图像源替换为微调器，以便所有内容都保持在正确的位置

示例代码：

第1栏
第2栏
第3栏

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

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

然后，将此javascript添加到页面中（当然，最好是在页面末尾，在关闭

标记之前）：

$（窗口）.load（函数（）{
$（“#加载”）.hide（）；
});

最后，使用style类调整加载图像的位置和加载div的

背景色

就是这样，应该很好用。但当然，您必须在某个地方有一个
ajaxloader.gif
。免费赠品。（右键单击>将图像另存为…
微调器显示在整个页面上，而不是我的图像上。见：
#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;
}

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