使用JavaScript显示页面加载进度

I am retrieving a list of files from a web service and displaying them as links. When someone clicks on the link, the file should start downloading. The problem is that no direct access to the file exists. Here is the process to download a file:

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

User clicks on link
用户点击链接
Server calls web service to retrieve file
服务器调用Web服务来检索文件
Browser is loading for as long as it takes to bring the file back from the web service
只要从Web服务返回文件所需的时间，浏览器就会加载
Browser finally offers file to user for download
浏览器终于向用户提供文件供下载

To counter the unfavorable user experience of having to wait for the web service before the download starts, I would like to display a "Loading..." feedback dialog when a link is clicked, and have the dialog go away when the file is ready.

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

I am using jQuery, and have been playing around with adding an iframe to the page to load the file, but the problem I am having is I don't know how to determine that the file is ready.

我正在使用jQuery，并且一直在为页面添加iframe来加载文件，但我遇到的问题是我不知道如何确定文件已准备就绪。

I am looking for tips, not only on the client side to give ample feedback, but perhaps also on the server side (using ASP.Net), just in case I can do something to streamline the process. Thank you.

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

Update: To clarify, this is for downloading a file to a user's machine. What I'm specifically looking for is a way to determine when the file is ready for download. So, when step #4 above takes place, I'd like to remove the "Loading..." message.

更新：为了澄清，这是用于将文件下载到用户的计算机。我特别想要的是确定文件何时可以下载的方法。因此，当上面的步骤＃4发生时，我想删除“正在加载...”消息。

5 个解决方案

#1

It sounds like you need to expose a new request URL on your server, whose only job is to reply whether the web-service-retrieval has completed (or if not, how far it has got).

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

Have AJAX poll that service every few seconds, and remove the "Loading..." message when it replied that the file is ready.

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

The client should send the session ID (maybe also a file ID), so that the server knows which file is being asked about. The server side will need to be able to contact the running web-service-retrieval process/thread to ask it how far it got. (If it can't find the thread then presumably it has finished.)

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

#2

you can use the complete option for $.ajax function in jquery which should get called when the request completes

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

#3

You can have jQuery to wait for the click of the link and when the link is clicked show the display loading message.

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

Example that shows how to 'Loading - Please wait' Message Display Script you can follow.

示例显示如何“加载 - 请稍候”您可以关注的消息显示脚本。

EDIT-

编辑-

Basically you want a progress bar monitor, which I have never seen it done with just javascript, but with flash or ajax.

基本上你需要一个进度条监视器，我从来没有看到它只用javascript，但使用flash或ajax。

Here is a File Upload Demo that should help.

这是一个应该有用的文件上传演示。

#4

If you're linking to an ASHX that is grabbing the file and writing it back to a stream, you can modify the links click event to display a message.

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

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

The loading message can just be a spinner or something while waiting for the ASHX to write the response back.

在等待ASHX写回响应时，加载消息可能只是一个微调器。

Edit: Since you're not directly linking to the 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;
  });
});

Using jQuery.get() and jQuery.post().

使用jQuery.get（）和jQuery.post（）。

Edit #2: I just had another thought. What if the Loading... message was in an iframe that redirected to the file? So you would display the iframe with jQuery, it would have the default message of Loading... and a little spinner animation, then set the iframe's src/location to the ASHX that takes forever to load. You could then give it an onload handler from the iframe's parent page that would hide/remove it. Let me know if you need sample code.

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

#5

If preparation for the file takes less than default timeout of AJAX request, you may start AJAX request, displaying "Loading..." message to user. AJAX call then checks for file's availability, and when it becomes available - returns with the message (success or not) and gives a link for the file. AJAX request can even do file download, but that's for your option.

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

#1