Ajax加载图像，直到页面完全加载

Question

我正在使用此功能将我点击的链接（menu_Nav）加载到<div>（apDiv2）。

$('.menu_nav').click(function() {
var href = $(this).attr('href');
$('#apDiv2').hide().load(href).fadeIn('normal');
return false;
}); 

有些网页需要一段时间才能加载，我理解这是正常的。我想在div / page容器的中心放置一个加载.gif图像，直到内容完全加载。要查看页面，请访问http://www.ForeverThaEmpire.com

Answer 1

您可以发送ajax请求以获取“href”网址的内容，并进行完成回调;

在执行ajax请求时，您可以更改将＃apDiv2的内容设置为loading.gif图像，并在ajax请求完成时将其清除。

$('.menu_nav').click(function() {
    var href = $(this).attr('href');

    // I Assume that /loading.gif is the url to your gif file
    $('#apDiv2').empty().append($('<img src="/loading.gif" />'));

    $.ajax({
        method: 'GET',
        url: href,
        success: function(content)
        {
            $('#apDiv2').html (content);
        }
    });

    return false;
});