個人網站有時候硬件條件比較簡陋，網速達不到理想要求。如果是一個有很多圖片的頁面，往往加載速度過長，用戶體驗不好。這裏介紹一個使用jquery延遲加載圖片的方案，效果見我的網站交友樂。原理是在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>