Question

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $('#sql').on ('click',function() {

       $('#loaderImg').show(); 

     });
    </script>

和html

<div class="container">
  <h1 class="text-center"></h1>
  <div id="loaderImg" style="display:none;background-color:white;width:100%;height:660px;">
     <img src="25.gif" alt="loader1" style="height:100px; width:100px;position:relative;left:500px;top:300px"></div>
     <input type="submit"  name="sql"  id="sql" onclick="myFunction1()" value="Import Database"   class="btn btn-danger"">

我有一个按钮＆＃39;导入数据库＆＃39;。当我点击按钮时，加载程序应该显示，直到加载完成。但是我的问题是加载器图像在显示一秒后突然消失。我怎么能解决这个问题??

Answer 1

从按钮中删除onclick。

代码需要： -

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

<div class="container">
    <h1 class="text-center"></h1>
    <div id="loaderImg" style="display:none;background-color:white;width:100%;height:660px;">
        <img src="25.gif" alt="loader1" style="height:100px; width:100px;position:relative;left:500px;top:300px"></div>
        <input type="submit"  name="sql"  id="sql" value="Import Database"  class="btn btn-danger">

<script type="text/javascript">
 $('#sql').on ('click',function() {

   $('#loaderImg').show(); 

 });
</script>

工作示例： -

＆＃13;

$('#sql').on ('click',function() {

 $('#loaderImg').show(); 

});

＆＃13;

#loaderImg{
display:none;
background-color:white;
width:100%;
height:100px;
}

img{
height:100px; 
width:100px;
position:absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="text-center"></h1>
    <div id="loaderImg">
     <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="loader1">
     </div>
<input type="submit"  name="sql"  id="sql" value="Import Database"   class="btn btn-danger">
</div>

＆＃13;

Answer 2

很奇怪，我在Codepen上尝试了你的代码并且运行良好。唯一的问题是，你的HTML没有关闭。关闭容器div后，加载gif应该播放，直到再次隐藏它为止。

所以我的建议是，从按钮中删除ObjectMapper mapper = bootstrap.getObjectMapper(); mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);，因为您没有使用它，在代码末尾添加结束onclick。

我不知道你的项目有多大，但是如果另一个插件或javascript代码干扰了你的</div>元素，

您可以尝试使用<input id='#sql'>

而不是$(document).on ('click', '#sql' ,function() {.....})

装载机无法正常工作

2 个答案: