使用 JavaScript 显示页面加载进度

Question

我正在从 Web 服务检索文件列表并将它们显示为链接。当有人点击链接时，文件应该开始下载。问题是不存在对该文件的直接访问。这是下载文件的过程：

1. 用户点击链接
2. 服务器调用 Web 服务来检索文件
3. 浏览器加载时间与从 Web 服务恢复文件所需的时间一样长
4. 浏览器终于​​提供文件供用户下载

为了解决在下载开始前必须等待 Web 服务的不利用户体验，我想在单击链接时显示“正在加载...”反馈对话框，并在单击链接时让对话框消失文件准备好了。

我正在使用 jQuery，并且一直在尝试向页面添加 iframe 以加载文件，但我遇到的问题是我不知道如何确定文件是否已准备好。

我正在寻找提示，不仅在客户端提供充足的反馈，而且可能也在服务器端（使用 ASP.Net），以防万一我可以做一些事情来简化流程。谢谢。

更新：澄清一下，这是为了将文件下载到用户的机器上。我特别寻找的是一种确定文件何时可以下载的方法。因此，当上述第 4 步发生时，我想删除“正在加载...”消息。

Answer 1

听起来你需要在你的服务器上公开一个新的请求 URL，它的唯一工作是回复 web-service-retrieval 是否已经完成（或者如果没有，它已经完成了多远）。

让 AJAX 每隔几秒轮询一次该服务，并在它回复文件已准备好时删除“正在加载...”消息。

客户端应该发送会话 ID（也可能是文件 ID），以便服务器知道正在询问哪个文件。服务器端需要能够联系正在运行的 web-service-retrieval 进程/线程来询问它已经走了多远。 （如果它找不到线程，那么它可能已经完成了。）

Answer 2

您可以在 jquery 中使用 $.ajax 函数的完整选项，该函数应在请求完成时调用

Answer 3

您可以让 jQuery 等待点击链接，并在点击链接时显示显示加载消息。

显示如何'Loading - Please wait' Message Display Script 您可以关注的示例。

编辑-

基本上你想要一个进度条监视器，我从未见过它只用 javascript 完成，但用 flash 或 ajax 完成。

这里有一个File Upload Demo，应该会有所帮助。

Answer 4

如果您要链接到抓取文件并将其写回流的 ASHX，您可以修改链接点击事件以显示消息。

$(function () {
  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    return true; // make sure the link still gets followed
  });
});

在等待 ASHX 写回响应时，加载消息可以只是一个微调器或其他东西。

编辑：因为您没有直接链接到 ASHX：

$(function () {
  var ashxCallback = function (data, textStatus) {
    // data could be: xmlDoc, jsonObj, html, text, etc...
    this; // the options for this ajax request
    // textStatus can be one of: "timeout", "error", "notmodified", "success", "parsererror" 
    alert(textStatus);
  };

  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    $.get("some.ashx?id=1234", "", ashxCallback);
    return false;
  });
});

使用jQuery.get() 和jQuery.post()。

编辑#2：我刚刚有了另一个想法。如果 Loading... 消息在重定向到文件的 iframe 中怎么办？因此，您将使用 jQuery 显示 iframe，它会显示默认消息 Loading... 和一个小微调器动画，然后将 iframe 的 src/location 设置为永远加载的 ASHX。然后，您可以从 iframe 的父页面为其提供一个 onload 处理程序，该处理程序将隐藏/删除它。如果您需要示例代码，请告诉我。

Answer 5

如果准备文件的时间少于 AJAX 请求的默认超时，您可以启动 AJAX 请求，向用户显示“正在加载...”消息。 AJAX 调用然后检查文件的可用性，当它变得可用时 - 返回消息（成功与否）并提供文件的链接。 AJAX 请求甚至可以进行文件下载，但这是您的选择。