单击时在图像按钮上显示加载动画答案

【问题标题】：Showing Loading Animation on Image Button, when clicked单击时在图像按钮上显示加载动画
【发布时间】：2017-10-18 07:24:30
【问题描述】：

我有一个图片按钮：

<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">

我想在按钮（不是整个页面）上显示加载动画，点击时。

我尝试使用 gif 图像，当点击按钮时它显示但不完全在按钮上。

【问题讨论】：

请表现出一些努力，你尝试了什么，什么没有奏效。
您希望将相同的动画准确地放置在您的图像元素上吗？您是否也在其他地方使用此动画，或者您只需要在图像上使用它？
不，我想要任何加载动画，不完全是这个。但我想要它在图像上

标签： javascript html css

【解决方案1】：

为了显示重叠的元素，一种常见的方法是使用absolute（或fixed）定位。要显示加载器，放置在您的 img 元素上方，您可以按照以下步骤操作：

将您的 img 元素包装在一个包装 div 中，并给这个 div position: relative。 absolute 位置也可以达到我们的目的，但这更有可能影响您当前的布局。
现在，在您的包装器 div 中，添加另一个包含加载动画（可能是 gif，或包含任何其他动画结构）的 div。使用absolute 定位将此加载器放置在您的 img 元素上，并根据您的要求放置它。

// bind click event
// you can use any event to trigger this
document.querySelector("#show-loader").onclick = function(){
  document.querySelector(".loader-wrapper").className = "loader-wrapper loading";
};//

.loader-wrapper{
  display: inline-block;
  position: relative;
}

.loader-wrapper .loader{
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.loader-wrapper.loading .loader{
  display: block;
}
.loader-wrapper .loader span{
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: orange;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  animation: zoom 1s ease infinite;
}

@keyframes zoom{
  0%{ transform: scale(1);}  
  50%{ transform: scale(2);}
  100%{ transform: scale(1);}
}

<div class="loader-wrapper">
  <input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
  
  <div class="loader">
    <span></span>
  </div>
</div><!--#wrapper-->

<br />
<button id="show-loader">Show loader</button>

【讨论】：

太棒了！！但是如果我只想要它时点击图像并在几秒钟后消失该怎么办。
@JagdeepSingh 你可以使用 jQuery 还是只使用 javascript？
是的，我正在使用 JavaScript。正如我之前所说，我无法在 onclick 上加载效果