Ajax Load Image直到页面已经完全加载

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”url的内容，并完成回调;

在执行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; 
});