Question

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

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

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

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

Answer 1

是的，AJAX适用于您的情况。我会解释一下。

用户点击链接后，阻止使用JavaScript加载页面。在jQuery代码中，这可能会跟随。

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

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

显示加载栏。
```
$('#loading').show();
```
然后向服务器发送AJAX请求。
服务器收到请求，计算结果并将其发送回客户端。
当客户端的JavaScript从服务器获得响应时，替换页面的内容。 jQuery允许您定义一个回调函数，该函数在响应到达时执行。
如果隐藏加载栏。
```
$('#loading').hide();
```

我建议使用jQuery来简化AJAX request。它会为你节省很多时间。

Answer 2

如果你还没有使用AJAX首先加载页面而只是一个简单的<a href="other-page">link</a>（从你的问题我认为是这样的 - 如果我弄错了，那么看{{3}如果您实际上使用AJAX加载其他页面，那么谁解释了如何做到这一点然后将处理程序绑定到AJAX事件将无法满足您的需求，因为没有AJAX事件。

我建议写这样的东西：

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

并绑定该函数以单击处理程序以缓慢加载链接，但不会阻止默认链接行为（即实际关注链接），例如对于class="slow"的链接：

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

或每个链接：

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

setTimeout就是这样，当服务器由于某种原因没有响应时，用户就不会永远无法使用该页面。

我仍然建议在显示加载微调器时不要使页面不可用，这样用户可以在等待服务器响应时自由使用其他内容，但这取决于您。请参阅the answer by sharethis（您在CSS中的一些变化）以了解我的意思。

如何在新页面启动时添加加载栏，直到所有数据完全加载？

2 个答案: