2

如何在按下指向另一个页面的“href”链接按钮时添加加载栏？

因为后端服务需要处理一些请求，这可能需要大约 10 秒才能显示新页面。（情况是当我按下链接按钮时，页面看起来像是在 10 秒左右停止响应......）

按下链接按钮时，我需要触发加载栏操作。

刚刚找到了一种使用 ajaxstart、ajaxstop 的方法（参考：http: //jsfiddle.net/jonathansampson/VpDUG/170/），它适合我的情况吗？

4

2 回答 2

1

是的，AJAX 适合您的情况。我会稍微解释一下。

  1. 用户单击链接后，阻止使用 JavaScript 加载页面。在jQuery代码中，这看起来如下所示。

    $('a').click(function(e){
    e.preventDefault();

    // save the destination of the link for the ajax request
    var destination = $(this).attr('href');
});

  2. 显示加载栏。

    $('#loading').show();

  3. 然后向服务器发送一个 AJAX 请求。

  4. 服务器接收请求，计算结果并将其发送回客户端。

  5. 当客户端的 JavaScript 得到服务器的响应时，替换页面的内容。jQuery 允许您定义一个在响应到达时执行的回调函数。

  6. 如果隐藏加载栏。

    $('#loading').hide();

我推荐使用 jQuery 来做简化的AJAX 请求。它将为您节省很多时间。

于 2012-10-02T09:58:40.797 回答
0

如果您一开始还没有使用 AJAX 加载页面，而只是一个简单的<a href="other-page">link</a>（从您的问题中我认为是这种情况 - 如果我弄错了，请查看sharethis 的答案，如果您解释了如何操作实际上确实使用 AJAX 加载其他页面）然后将处理程序绑定到 AJAX 事件不会做你需要的，因为不会有 AJAX 事件。

我建议写这样的东西：

function loading () {
    $('body').addClass('loading');
    setTimeout(function () {
        $('body').removeClass('loading');
    }, 20000);
}

并将该函数绑定到加载缓慢的链接的单击处理程序，但不会阻止默认链接行为（即实际跟随链接），对于具有以下链接的链接class="slow"：

$('a.slow').click(loading);

或对于每个链接：

$('a').click(loading);

如果setTimeout服务器由于某种原因没有响应，那么用户将不会让页面永远无法使用。

我仍然建议不要在显示加载微调器时使页面不可用，这样用户就可以在等待服务器响应的同时或代替等待服务器响应，但这取决于您。请参阅此演示（您对 CSS 的一些更改）以了解我的意思。

于 2012-10-02T10:40:16.453 回答