javascript - 如何在 AJAX 请求期间显示加载图像？

Question

div在此 jQuery 代码的帮助下， 我正在将另一个页面加载到 a中：

$('#maildiv').load('reports/mail_report.php');

负载需要一些时间。同时我想显示一个加载图像。加载文件消息时，应隐藏加载图像。

我怎样才能做到这一点？

我试过：

function mail() {
    $("#mailimg").show();
    $('#maildiv').load('reports/mail_report.php') {
        $("#mailimg").fadeOut("10000");
        $('#maildiv').fadeOut("10000");
    }
}

<input type="button" class='button green' value="Mail Report" name="" id=""  Onclick='mail();return false;'/>
<img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'>     
<div id="maildiv" style="color:red;"> </div>

Answer 1

使用 .load() 完成回调隐藏加载图像。

还有一点就是加载的 div maildiv，为什么要用$('#maildiv').fadeOut("10000"). 我认为您需要使用 show it using$('#maildiv').fadeIn("10000")

function mail() {
    $("#mailimg").show();
    $('#maildiv').load('reports/mail_report.php', function() {
        $("#mailimg").fadeOut("10000");
        $('#maildiv').fadeOut("10000");
    })
}

Answer 2

这是通用的，应该解决这个问题。

//Do what you have to before its starts
$('#whereitstobeloads').load('filethatstobeloaded', function() {
  //What you want to do when its loaded
});

Answer 3

看起来您的想法是正确的-使用的回调函数load-但是您的语法不正确。尝试这个：

function mail() {
    $('#mailimg').show();
    $('#maildiv').load(
        'reports/mail_report.php'),
        function() {
            $('#mailimg').fadeOut("10000");
            $('#maildiv').fadeOut("10000");
        }
    }
}

Answer 4

尝试这个：

function mail() {
    $("#mailimg").css('display','block');
    $('#maildiv').load('reports/mail_report.php', function(){
    $('#mailimg').animate({
        opacity: 0.0
        }, 1000, 'linear', function(){
            $('#maildiv').animate({
                    opacity: 1.0
                    }, 1000, 'linear');
        });
    });
}