Question

我在这个jQuery代码的帮助下将另一个页面加载到div：

$('#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")隐藏它。我认为你需要使用$('#maildiv').fadeIn("10000")

来展示它

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

Answer 2

您的负载调用错误。

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

}

Answer 3

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

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

Answer 4

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

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

Answer 5

试试这个：

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

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

5 个答案: