Question

我想在点击表单按钮后显示动画gif。

更新：我在此处找到了解决方案：http://www.corelangs.com/css/box/fulloverlay.html

我将它与动画gif（而不是登录表单）相结合，以获得我想要的效果。

我在我的脚本中使用了.show（）方法，如下所示：

$(document).ready(function () {  
    $("#my_submit").click(function(e) { 
        console.log("please wait...");
        $( "#processing_gif" ).show();
        $( "#cover" ).show();

在我的表格中，我使用了这些div：

        <div id="processing_gif"></div>
        <div id="cover"></div>

我使用了这个CSS：

#processing_gif {
   position:fixed; 
   top:0; 
   left:0; 
   z-index:999; 
   width:100%;
   height:100%;
   opacity:0.8;
   background: url('/files/animation_processing.gif') center center no-repeat; 
   display:none;
}

#cover{ 
  position:fixed; 
  top:0; left:0; 
  background:rgba(256,256,256,0.9); 
  z-index:1; 
  width:100%; 
  height:100%; 
  display:none; 
}

以下是完整的原始教程：

<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> <a href="#loginScreen" class="button">Click here to Log In</a> </div> <div id="loginScreen"> <a href="#" class="cancel">&times;</a> </div> <div id="cover" > </div> </body> </html>

Answer 1

你可以在$ .ajax（params）之前添加$（“my_image_selector”）。show（）并在“成功”或“错误”发生时通过添加$（“my_image_selector”）来隐藏它.hide（）< / p>

或者您可以使用.ajaxStart和.ajaxStop。 see jquery docs

Answer 2

啊jquery - 叹息。你将不得不调整它以获得你想要的样式/演示文稿，但是我将使用普通的旧JavaScript指向你的大方向。

在您想要的页面上添加要使用的gif的图片标记
```
  < img src='loading.gif'/>
```

在图像样式中添加id和“display：none”以隐藏它

<img id='loadingImg'  style='display:none;' src='loading.gif'/>

摆脱提交按钮代码中的onclick处理程序，而不是在表单下面放置这样的代码

 <script>
       //listen for click on your button
       document.getElementById('add-all-to-cart').addEventListener('click',
           function(event){
                //this is the code that runs when the button is clicked
                //get the button we clicked on
                var target=event.target||event.srcTarget;
                //set that button to disabled
                target.disabled=true;
                //display the loading image
                document.getElementById('loadingImg').style.display='block';  
            }

</script>

在提交长Javascript请求时显示等待消息

2 个答案: