如何在脚本工作时显示加载图像？
如何在脚本工作时显示加载图像？
提问于 2014-11-03 04:34:39
我使用jquery/ajax/php登录到我的网站。当我将此登录功能签入到我的服务器时，需要几秒钟的时间才能签入详细信息。因此，我想显示一个加载图像，而它是签入详细的日志。如何显示这个加载图像？
我想使用这个加载映像：
<img src="images/loading-image.gif"/>表格：
<div id="success"></div>
<form id="login_process">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Username</td>
<td><input type="text" name="front_username" placeholder="Username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="front_password" placeholder="Password"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="LogIn" class="submit"></td>
</tr>
<tr>
<td colspan="2">Forgot your password ? Click <a href="forgotpass.php">here.</a></td>
</tr>
</table>
</form>Jquery：
<script>
$('#login_process').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#success').html('');
$.each( data, function( key, value ) {
if(key !== 'error') {
$('#success').append('<p>'+value+'</p>');
}
});
if( ! data.error) {
$('#hide').hide();
setTimeout(function () {
$('input[type=submit]').attr('disabled', false);
window.location.href = "index.php";
}, 2000);
}
}
});
});
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-03 04:42:14
在这里，您只需获得加载映像并在进行ajax调用之前显示它，调用完成后您只需隐藏它。
html
<img id="loaderAnim" src="images/loading-image.gif"/>JS
//Hide image on page load
$('#loaderAnim').hide();
$('#login_process').submit(function(event) {
event.preventDefault();
$('#loaderAnim').show(); // Show it before making ajax call
$.ajax({
type: 'POST',
url: 'login_process.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#loaderAnim').hide(); // Hide always after every request
$('#success').html('');
$.each( data, function( key, value ) {
if(key !== 'error') {
$('#success').append('<p>'+value+'</p>');
}
});
if( ! data.error) {
$('#hide').hide();
setTimeout(function () {
$('input[type=submit]').attr('disabled', false);
window.location.href = "index.php";
}, 2000);
}
}
});Stack Overflow用户
发布于 2014-11-03 04:45:42
将类添加到图像标记中，如下所示：
<img class="img-loading" src="images/loading-image.gif"/>我不会写CSS初始隐藏的加载图像或它的定位，希望你能做到你自己。
那么最简单的方法就是按如下所示修改脚本，
<script>
$('#login_process').submit(function(event) {
event.preventDefault();
//SHOW YOUR LOADING IMAGE
$('.img-loading').show();
$.ajax({
type: 'POST',
url: 'login_process.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#success').html('');
$.each( data, function( key, value ) {
if(key !== 'error') {
$('#success').append('<p>'+value+'</p>');
}
//HIDE YOUR LOADING IMAGE
$('.img-loading').hide();
});
if( ! data.error) {
$('#hide').hide();
setTimeout(function () {
$('input[type=submit]').attr('disabled', false);
window.location.href = "index.php";
}, 2000);
}
});
});
</script>Stack Overflow用户
发布于 2014-11-03 04:45:08
首先使用css隐藏图像，然后按以下方式修改代码：
HTML：
<img class="loading" src="images/loading-image.gif"/>联署材料：
$('#login_process').submit(function(event) {
event.preventDefault();
$('.loading').show();
.....
......
success: function (data) {
$('.loading').hide();
....
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26707827
复制相关文章
相似问题
腾讯云开发者
