显示“正在加载"按钮上的动画单击 [英] Show "loading" animation on button click

问题描述

我想做一些非常简单的事情. 我的页面上有一个按钮.

I want to do something very simple. I have one button in my page.

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

现在我想要的是用户按下此提交按钮时的情况.它显示了加载" gif动画，直到获得服务器的响应为止.

Now what I want is when the user presses this submit button. It shows that "loading" gif animation until it gets the response from server.

但是很久以来我一直在挣扎.

But I have been struggling since long time.

我该如何实现?

推荐答案

如果您使用的是ajax，那么(使其尽可能简单)

If you are using ajax then (making it as simple as possible)

1. 将加载的gif图像添加到html并将其隐藏(现在使用html本身的样式，您可以将其添加到单独的CSS中):

1. Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):

<img src="path\to\loading\gif" id="img" style="display:none"/ >

单击按钮时显示图像，并在成功功能上再次将其隐藏

Show the image when button is clicked and hide it again on success function

$('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

请确保也将图像隐藏在ajax错误回调中，以确保即使ajax失败，gif也会隐藏.

Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.

这篇关于显示“正在加载"按钮上的动画单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！