Question

我正在寻找添加gif加载onclick或删除“点击更改文本”的动画具有相同的按钮特征和gif重叠（例如来自airbnb.com的搜索框）我该怎么办？< / p>

谢谢！

<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">

<script type="text/javascript">
    function change() 
        document.getElementById("myButton1").value = "Logging in..."; 
    }
</script>

Answer 1

尝试下面的代码，它也有加载图片和文字。

$('#myButton1').click(function(){
      $('#myButton1').hide();
      $('.load').addClass('loading');
        setTimeout(function () { 
        $('.load').removeClass('loading');
        $('#myButton1').show();

      }, 2000);
    });

.loading{
  background-image : url('http://www.fotos-lienzo.es/media/aw_searchautocomplete/default/loading.gif');  
  background-repeat:no-repeat;
}
.loading:after {
    content: "Logging in...";
    text-align : right;
    padding-left : 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input   type="submit" class="submit-form" value="Log in" id="myButton1">
    <div class="load"></div>

Answer 2

<script type="text/javascript">
    function change() {
        document.getElementById("myButton1").style.background='#000000'; 
    }
</script>

Answer 3

正如我从您的问题标签中看到的，您使用的是JQuery

    function change() 
     $("#myButton1").css({
       background-image:url('PATH/TO/LOADING/IMAGE.gif')
     }); 
    }

完成加载后，您可以创建一个停止加载的功能

function stopLoading() 
     $("#myButton1").css({
       background-image:'none'
     }); 
    }

Answer 4

对不起图片，它的背景不透明。我希望至少它会给你一个想法。

https://jsfiddle.net/3pmpqpwj/

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif' id='overlay' style="display:none;" />
        <button id="searchbtn" class="btn btn-default" type="button" onclick="change(); alert('test');">Log In</button>

CSS

#overlay{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 2px;
    z-index: 3;
    left: 32px;
}

JS

$('#searchbtn').click(function(){
     $(this).html("Logging in...").prop('disabled',true); 
     $("#overlay").show();
});

更改按钮onclick以加载动画

4 个答案: