asp使用jquery延迟加载用户控件加速网页显示速度
个人网站有时候硬件条件比较简陋,网速达不到理想要求。如果是一个有很多图片的页面,往往加载速度过长,用户体验不好。这里介绍一个使用jquery延迟加载图片的方案,效果见我的网站交友乐 www.jyouel.com 。原理是在default页面使用jquery动态加载一个包含用户控件的页面,此页面的显示不影响default页面的显示。实际效果是会先显示default页面,待图片加载完毕后,自动显示图片部分。
JQUERY代码:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#HotUserDiv').load('hotuserlist.aspx');
});
说明: hotuserdiv是用于显示图片的div,hotuserlist.aspx是包含用户自定义控件的页面,代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HotUserList.aspx.cs" Inherits="HotUserList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="~/ascx/DefaultPageUserList.ascx" TagName="hotuser" TagPrefix="UserList" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</head>
<body>
<UserList:hotuser runat="server" />
</body>
</html>
用户控件DefaultPageUserList.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DefaultPageUserList.ascx.cs" Inherits="DefaultPageUserList" %>
<asp:DataList runat="server" CellPadding="6" DataSourceID="HotMemberSource"
ID="HotShow" RepeatColumns="3" AlternatingItemStyle-HorizontalAlign="Center"><ItemTemplate>
<table>
<tr><td>
<asp:HyperLink ID="User1" NavigateUrl='<%# "PUBLICS/MemberDetail.aspx?id="+Eval("user_id")%>' Target="_blank" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("user_pic") %>' Height="110px" Width="100px"/></asp:HyperLink>
</td>
</tr>
<tr><td align="center" height="31" valign="top">
<asp:HyperLink ID="HyperLink1" NavigateUrl='<%# "PUBLICS/MemberDetail.aspx?id="+Eval("user_id")%>' Text='<%# Eval("nick_name") %>' Target="_blank" runat="server"></asp:HyperLink>
<br>
<asp:Label ID="AreaAge" runat="server" Text='<%# Eval("area") + " "+ Eval("age") %>'></asp:Label>
</td></tr>
</table>
</ItemTemplate></asp:DataList>
<asp:SqlDataSource ID="HotMemberSource" runat="server"
ConnectionString="<%$ ConnectionStrings:efunnyConnectionString %>"
SelectCommand="SELECT top 9 * FROM [V_HOT_USER]">
</asp:SqlDataSource>
控件后台code
public partial class DefaultPageUserList : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
HotShow.DataBind();
}
}
default页面部分代码:
<div id="HotUserDiv">
<p style="font-size:15px">会员信息载入中,请稍等</p>
</div>