个人网站有时候硬件条件比较简陋,网速达不到理想要求。如果是一个有很多图片的页面,往往加载速度过长,用户体验不好。这里介绍一个使用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>