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 容器的中心放置一个 loading .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;
});

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

Ajax Load Image untill page is fully loaded

ajax

jquery