asp使用jquery延迟加载用户控件加速网页显示速度

最新推荐文章于 2024-09-27 19:05:14 发布

weixin_30292843

最新推荐文章于 2024-09-27 19:05:14 发布

阅读量35

点赞数

文章标签： xhtml c# javascript ViewUI

原文链接：http://www.cnblogs.com/shjyoule/archive/2011/02/16/1956238.html

版权

个人网站有时候硬件条件比较简陋，网速达不到理想要求。如果是一个有很多图片的页面，往往加载速度过长，用户体验不好。这里介绍一个使用jquery延迟加载图片的方案，效果见我的网站交友乐 www.jyouel.com 。原理是在default页面使用jquery动态加载一个包含用户控件的页面，此页面的显示不影响default页面的显示。实际效果是会先显示default页面，待图片加载完毕后，自动显示图片部分。

JQUERY代码:

说明： 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">

用户控件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>

转载于:https://www.cnblogs.com/shjyoule/archive/2011/02/16/1956238.html