JQuery对页面加载的影响

时间:2012-05-22 20:30:31

标签: c# javascript jquery asp.net ajax

我有一个页面在页面加载中做了一些耗时的事情(实际上就是这样)。我想向用户展示一个不错的消息,然后在过程完成后用实际结果替换它。

我尝试的每件事都会在漫长的过程结束后让UI呈现,这没有用。我尝试使用UpdatePanel进行页面渲染,然后从客户端触发更新,但它也不起作用。

有人能给我一些关于如何做到这一点的线索吗?

由于

3 个答案:

答案 0 :(得分:3)

我建议您执行以下操作:

  1. 创建一个新页面,仅显示加载时要显示的内容。加载图形或其他方式。
  2. 通过AJAX调用当前页面并让它返回successfailure或任何您想要返回第1页的内容。
  3. 在ajax调用返回后,您可以用您的超级图形替换加载图标或html。
  4. 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/

答案 1 :(得分:0)

您可以在jQuery BlockUI plugin中使用ready handler,阻止,处理,然后取消阻止。

如果有大量数据流向客户端,那么在准备处理程序启动并阻止页面之前可能会有一段不舒服的时间,因此另一种策略是使用<div>来覆盖页面(在你准备好的处理程序的末尾隐藏你的“请等待,加载”消息)。

答案 2 :(得分:0)

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