Javascript 如何在AJAX请求期间显示正在加载的图像？

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

div

：

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

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

我该怎么做

我试过：

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

使用.load（）完整回调隐藏加载映像

另一点是加载的div

maildiv

，为什么要使用

$（'#maildiv'）.fadeOut（“10000”）

隐藏它。我认为您需要使用

$（'#maildiv'）.fadeIn（“10000”）

---

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

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

---

看起来您的想法是正确的-使用

load

的回调函数-但是您的语法不正确。试试这个：

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

试试这个：

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

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');
        });
    });
}

---

您可以使用：

.ajaxStart（）

和

.ajaxStop（）

这些答案有帮助吗？如果是，请勾选一个，这样这个主题就可以被认为是结束了，如果不是，请提供一些反馈或您自己的答案。