javascript 如何在 jquery ajax 的后期数据处理期间设置加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8875107/
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
How can I set loading image during post data processing for jquery ajax?
提问by shibly
The jquery ajax code is:
jquery ajax 代码是：
$("#id_btnpolls").click(function(){
var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
//alert(valCheckedRadio);
$.ajax({
type: "POST",
url: "/pollanswers/checkpollanswers",
data: "valCheckedRadio="+valCheckedRadio,
success: function(prm){
//alert(prm);
$("#id_color_polls").html(prm);
}
});
})
When I click the button, the data is displayed after 5 seconds or so. During that loding period I want to add a loading image. How can I do this?
当我单击按钮时，数据会在 5 秒左右后显示。在那个加载期间，我想添加一个加载图像。我怎样才能做到这一点？
回答by HandiworkNYC.com
Here's the CSS + HTML I use for my loading image. I use jQuery to simply add a class that changes the opacity from 1 to 0, in combination with a CSS transition property for a fade effect. The background image for #loader is 220px X 80px and is just a solid color rounded rectangle with the text "loading" on the right hand side. The actual "ajax" spinner img is 60px tall, so that relative positioning and negative margin are there to center the img vertically.
这是我用于加载图像的 CSS + HTML。我使用 jQuery 简单地添加一个将不透明度从 1 更改为 0 的类，并结合 CSS 过渡属性来实现淡入淡出效果。#loader 的背景图像为 220px X 80px，只是一个纯色圆角矩形，右侧带有文本“loading”。实际的“ajax”微调器 img 是 60px 高，因此相对定位和负边距可以使 img 垂直居中。
#loader {
width: 220px;
height: 80px;
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
opacity: 0;
background: url(assets/images/bg-loader.png) no-repeat center center;
transition: all .5s ease-in-out;
margin: -40px 0 0 -110px;
}
#loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}
.loading #loader {z-index: 1000; opacity: 1.0}
And the HTML (i got the loader.gif from here http://www.preloaders.net):
和 HTML（我从这里得到了 loader.gif http://www.preloaders.net）：
<div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>
And then your jQuery:
然后你的jQuery：
$("#id_btnpolls").click(function(){
var $body = $('body'),
valCheckedRadio = $('input[name=data[distributions]]:checked').val();
$body.addClass('loading');
$.ajax({
type: "POST",
url: "/pollanswers/checkpollanswers",
data: "valCheckedRadio="+valCheckedRadio,
success: function(prm){
//alert(prm);
$("#id_color_polls").html(prm);
$body.removeClass('loading');
}
});
})
回答by hvgotcodes
1) Have a holding div for the image, that is normally not visible.
1) 为图像保留一个 div，通常是不可见的。
You can do this via css, by adding visibility:hidden;(vs visibility: visible;), or optionally with display: none;
您可以通过 css、添加visibility:hidden;(vs visibility: visible;) 或可选地使用display: none;
2) In your click handler, make that holding div visible.
3) In the donecallback, make it invisible again.
2) 在您的点击处理程序中，使该持有 div 可见。
3）在done回调中，再次使其不可见。
var request = $.ajax({
url: "script.php",
type: "POST",
data: {id : menuId},
dataType: "html"
});
request.done(function(msg) {
$("#log").html( msg );
// hide your loading image div here
});
回答by jermel
回答by Arvind Bhardwaj
The HTML and CSS code specified by j-man86 is good. For jQuery you can use the beforeSend function in the AJAX call. beforeSendis called before an AJAX request is sent. To hide the loading image use completefunction of jQuery AJAX which is called after an AJAX request has been completed. So the code will look like:
j-man86 指定的 HTML 和 CSS 代码是好的。对于 jQuery，您可以在 AJAX 调用中使用 beforeSend 函数。beforeSend在发送 AJAX 请求之前被调用。要隐藏加载图像，请使用jQuery AJAX 的完整功能，该功能在 AJAX 请求完成后调用。所以代码看起来像：
$("#id_btnpolls").click(function(){
var $body = $('body'),
valCheckedRadio = $('input[name=data[distributions]]:checked').val();
$body.addClass('loading');
$.ajax({
type: "POST",
url: "/pollanswers/checkpollanswers",
data: "valCheckedRadio="+valCheckedRadio,
beforeSend: function(){
$body.addClass('loading');
},
success: function(prm){
//alert(prm);
$("#id_color_polls").html(prm);
},
complete: function(){
$body.removeClass('loading');
}
});
})
