Javascript 使用 jQuery 单击表单提交后显示加载 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27026323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show loading gif after clicking form submit using jQuery
提问by ValleyDigital
I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to visibility: hidden.
我试图在提交表单后简单地显示一个加载 gif。我的代码无法正常工作以显示加载 gif。你会看到我的 gif 图像设置为visibility: hidden.
<script src="js/jquery-1.11.1.min.js"></script>
<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
<img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
<div class="fade" id="form">
<form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
<label for="username"> Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password"> Password:</label>
<input type="password" name="password" id="password" size="30" required><br><br>
<input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
</form>
</div>
</div>
<div class="fifty"></div>
<script type="text/javascript">
$('.load_button').submit(function() {
$('#gif').show();
return true;
});
</script>
回答by Rory McCrossan
The show()method only affects the displayCSS setting. If you want to set the visibility you need to do it directly. Also, the .load_buttonelement is a button and does not raise a submitevent. You would need to change your selector to the formfor that to work:
该show()方法仅影响displayCSS 设置。如果要设置可见性，则需要直接进行。此外，该.load_button元素是一个按钮，不会引发submit事件。您需要将选择器更改form为 才能工作：
$('#login_form').submit(function() {
$('#gif').css('visibility', 'visible');
});
Also note that return true;is redundant in your logic, so it can be removed.
另请注意，这return true;在您的逻辑中是多余的，因此可以将其删除。
回答by Dave
Button inputs don't have a submit event. Try attaching the event handler to the form instead:
按钮输入没有提交事件。尝试将事件处理程序附加到表单：
<script type="text/javascript">
$('#login_form').submit(function() {
$('#gif').show();
return true;
});
</script>
回答by BenW
Better and clean example using JS only
仅使用 JS 的更好更干净的示例
Reference: TheDeveloperBlog.com
Step 1 - Create your java script and place it in your HTML page.
第 1 步 - 创建您的 Java 脚本并将其放置在您的 HTML 页面中。
<script type="text/javascript">
function ShowLoading(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading_bar.GIF';
div.innerHTML = "Loading...<br />";
div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
div.appendChild(img);
document.body.appendChild(div);
return true;
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>
in your form call the java script function on submit event.
在您的表单中调用提交事件的 java 脚本函数。
<form runat="server" onsubmit="ShowLoading()">
</form>
Soon after you submit the form, it will show you the loading image.
提交表单后不久，它会显示加载图像。
回答by Nebulosar
What about an onclick function:
onclick 函数怎么样：
<form id="form">
<input type="text" name="firstInput">
<button type="button" name="namebutton"
onClick="$('#gif').css('visibility', 'visible');
$('#form').submit();">
</form>
Of course you can put this in a function and then trigger it with an onClick
当然你可以把它放在一个函数中，然后用 onClick 触发它
