jquery ajax加载gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6329261/
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
jquery ajax loading gif
提问by yuli chika
How do I add a loading gif during the jQuery AJAX processing? I read some tutorials, they use beforeSend. but still not see the loading thing.
如何在 jQuery AJAX 处理期间添加加载 gif？我阅读了一些教程，他们使用beforeSend. 但仍然没有看到加载的东西。
<script src="jquery-1.6.1.min.js"></script>
<script>
$.ajax({
url: "index_2.php",
dataType: "html",
type: 'POST',
data: "value=something",
beforeSend: function () {
$("#result").html('<img src="loding.gif" /> Now loding...');
},
success: function(data){
$("#result").html(data); //even add .delay(5000)
}
});
</script>
<div id="result"></div>
index_2.php
index_2.php
<?php
sleep(5);
echo $_POST['value'];
?>
I set sleep(5);in index_2.php, it should show the londing.gifin the div#resultfor 5 seconds, until the data return from index_2.php.
我设置sleep(5);的index_2.php，它应该显示londing.gif在div#result5秒钟，直到从数据返回index_2.php。
回答by Mahesh KP
may be an idea is before calling the ajax request load the image like you done ie
可能是一个想法是在调用 ajax 请求之前像你完成的那样加载图像
$("#result").html('<img src="loding.gif" /> Now loding...');
then onsuccess bind the data
然后onsuccess绑定数据
回答by Vaibhav Mistry
there's a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.
有几种方法。我的首选方法是将函数附加到元素本身的 ajaxStart/Stop 事件。
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/Stop functions will fire whenever you do any ajax calls.
ajaxStart/Stop 函数将在您执行任何 ajax 调用时触发。
回答by Phil.Wheeler
Have a look at the $.ajaxStart()function, which will execute whenever any Ajax request is started (obviously).
看看这个$.ajaxStart()函数，它会在任何 Ajax 请求启动时执行（显然）。
Check this questionfor details.
检查此问题以获取详细信息。
