加载GIF提交

我不知道这是可能的，因为根据我的概念是not.Say我有一个表格：加载GIF提交

<form action="/loadLotsOfRecords" method="get"> 
<input type="text" name="email" /> 
<input type="submit /> 
</form>

现在这种形式至少需要10-15秒因为显然有很多的记录加载。我知道使用AJAX我可以做一个加载GIF并加载记录。但是，有没有一种方法可以在不使用AJAX的情况下在加载页面的15秒内显示GIF。如果我使用windows.load函数，它只会在下一页上旋转。我需要的是，而不是浏览器加载我想在我的身体同时加载器。谢谢

来源

2016-07-06 Aditya Singh

快速的答案是...否。问题是，当你提交表单/浏览到一个新的页面，您可以在页面无法控制了。浏览器然后等待从服务器获得响应。在这种情况发生之前，您需要等待并让浏览器执行此操作。 –

你只需要显示你成功的表单提交加载gif。这样，加载gif就会出现在页面上并一直显示，直到页面被处理后重定向到下一页。除非您希望在表单提交中发现任何错误，否则您并不关心隐藏加载情况。只有在表单成功提交后，才应显示该加载器。

$(document).ready(function(){ 
 
    $("#myform").on("submit", function(){ 
 
    $("#pageloader").fadeIn(); 
 
    });//submit 
 
});//document ready

#pageloader 
 
{ 
 
    background: rgba(255, 255, 255, 0.8); 
 
    display: none; 
 
    height: 100%; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
#pageloader img 
 
{ 
 
    left: 50%; 
 
    margin-left: -32px; 
 
    margin-top: -32px; 
 
    position: absolute; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="pageloader"> 
 
    <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." /> 
 
</div> 
 

 
<form id="myform"> 
 
    <input type="text" name="fname" id="fname" value="" /> 
 
    <input type="submit" value="Submit" /> 
 
</form>

来源

2016-07-06 06:18:59

好吧，许多（大多数）浏览器实际上停止GIF动画等，当它开始导航到一个新的页面。所以，确定它可以在某些特定情况下工作，但总的来说，这不是真正的解决方案。 –

@MagnusEriksson你有一个点。但我已经使用了它几次，它的工作。可能是我没有检查所有浏览器。 –

...我用它来做，并停止，因为它很少工作。 :) –

加载GIF提交

回答

相关问题