Question

如何在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

<?php
sleep(5);
echo $_POST['value'];
?>

我在sleep(5);中设置index_2.php，它应该在londing.gif中显示div#result 5秒，直到数据从index_2.php返回。

Answer 1

可能是一个想法是在调用ajax请求之前加载图像就像你所做的那样

$("#result").html('<img src="loding.gif" /> Now loding...');

然后onsuccess绑定数据

Answer 2

有几种方法。我首选的方法是将一个函数附加到元素本身的ajaxStart / Stop事件上。

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

只要进行任何ajax调用，就会触发ajaxStart / Stop函数。

Answer 3

查看$.ajaxStart()函数，该函数将在任何Ajax请求启动时执行（显然）。

查看this question了解详情。

jquery ajax加载gif

3 个答案: