jQuery对页面加载的影响

Question

我有一个页面在页面加载中做了一些耗时的工作（实际上就是它所做的全部）。 我想向用户展示一个不错的消息，然后在实际结果完成后将其替换。

我尝试做的所有事情都会使UI在漫长的过程结束后呈现，这无济于事。 我尝试使用UpdatePanel使页面呈现，然后从客户端触发更新，但是它也不起作用。

有人可以告诉我如何执行此操作吗？

谢谢

Answer 1

我建议您执行以下操作：

1. 创建一个新页面，该页面仅显示加载时要显示的内容。 正在加载图形或其他方式。
2. 通过AJAX调用您的当前页面，让它返回success或failure或您想要返回到页面1的任何内容。
3. 在ajax调用返回之后，您可以用成功的图形替换正在加载的图标或html。

HTML页面1： <div id="content"><img src="images/loading.png" alt="loading" /></div>

jQuery的：

$.ajax({
    type: "GET",
    timeout: 30000,  // set accordingly
    url: "/some/url", // this is the page that will do all the work
    beforeSend: function() {
      // do some stuff
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("An error has occurred making the request: " + errorThrown); // if there was an issue
    }, 
    success: function() {
    $('#content').html('Success!!'); // change icon or what you need to do.
    }
    });

我无法获得用于正确设置代码格式的UI。 jQuery Ajax参考： http ： //api.jquery.com/jQuery.ajax/

Answer 2

您可以使用jQuery BlockUI插件 -在就绪的处理程序中 ，进行阻止，处理然后取消阻止。

如果有大量数据流到客户端，则就绪处理程序启动并阻塞页面之前，可能会有一段不舒服的时间，因此另一种策略是使<div>覆盖页面（请使用“等待，正在加载其中的消息），您将其隐藏在就绪处理程序的末尾。

Answer 3

如果使用的是ASP.NET WebForms，则可以在加载某些内容时使用UpdatePanel和UpdateProgress来显示图像。 只需将updateprogress控件指向updatepanel控件即可。 UpdateProgress将包含加载图像和updatepanel您的主要内容和控件。 但是，UpdateProgress和UpdatePanel是Microsoft编写的丑陋工具，我强烈建议使用jQuery及其真正的AJAX调用（尽管这样做会涉及更多工作）