jquery ajax加载gif

问题描述：

如何在jQuery AJAX处理过程中添加加载gif？我阅读了一些教程，他们使用beforeSend。但仍然没有看到加载的东西。jquery ajax加载gif

<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']; 
?>

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

是否有可能您的gif名称错误？你在JS中指定'loding.gif'，然后在问题文本中指定'londing.gif'，但大概你的意思是'loading.gif'？ – lonesomeday 2011-06-13 10:33:17

您是否看到ajax请求的结果？ – minikomi 2011-06-13 10:52:18

答

可能是一个想法是调用Ajax请求加载图像像你这样即完成

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

随后的onSuccess绑定数据

$（document）.html（' Now loding ...'）;将这项工作 – 2014-12-09 10:10:42

答

看一看的$.ajaxStart()功能，将执行，只要任何前Ajax请求开始（显然）。

查看this question了解详情。

答

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

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

ajaxStart/Stop函数会在您执行任何ajax调用时触发。

jquery ajax加载gif

相关推荐