Saturday, March 24, 2012

Load Content after page has finished loading

Hello -

I am not sure what I need to accomplish this task but sounds like something ajax can do. I have a section on my web site where I want to display a random article every time the user goes to a different page on my site. I want the whole page to load and not wait for the article to be pulled form the database and displayed to the page. I also would like the page to not refresh when the article is finally displayed.

Thanks.

You could use a WebService, after the page has finished loading you would call the WebService's WebMethod to get a new article, when you get the article you could use JavaScript and the DOM to show it in the page.

Check out these articles about WebServices:

http://www.asp.net/ajax/documentation/live/tutorials/ExposingWebServicesToAJAXTutorial.aspx

http://www.asp.net/ajax/documentation/live/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

Hi

Start callback immediately after page loaded

If the contents of the panel are very large,you can delay by several seconds to load the content.

You don't need to load it when the whole page load.when the whole page is loading,set the panel unvisible.

Then load the content of the panel.

Code as follow:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
TextBox1.Text = DateTime.Now.ToString();
}
</script>

<script type="text/javascript">
function delayLoad()
{
document.getElementById("<%= Button1.ClientID %>").click();
document.getElementById("<%= UpdateProgress1.ClientID %>").style.display = "block";
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body onload="setTimeout('delayLoad()',3000)">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<div visible="true"><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Waiting...........
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>

More informatin,see:Delaying Content Load using Timer and UpdatePanel ANDControlling visibility of contents of collapsiblepanel

Thanks

No comments:

Post a Comment