asp.net - 如何使用 asp.net 在图像数据列表中应用按需加载(延迟加载)概念？

Question

在我的 asp.net 应用程序中有一个数据列表，页面加载事件我必须绑定(bind)图像项的数量(1000)，如何应用按需加载(你可以说延迟加载图像)(滚动时页面那个时候只绑定(bind)像facebook新需求页面的项目)

基本上我不希望由于没有图像和它们的加载时间而导致页面加载延迟。我的代码是页面加载事件获取数据并绑定(bind)datalist

SqlCommand comd = new SqlCommand("usp_GetSubCategoryProducts", OBcon);
                comd.CommandType = CommandType.StoredProcedure;
                comd.Parameters.Add("@ID", SqlDbType.Int).Value = SubCategory_id;

                DataSet ds = new DataSet();
                SqlDataAdapter sqlAdapter = new SqlDataAdapter();
                sqlAdapter.SelectCommand = comd;
                sqlAdapter.Fill(ds);
 listView.DataSource = ds;
                listView.DataBind();

Answer 1

好吧，您可以使用 jQuery 的延迟图像加载工具来做到这一点……这非常棒，正好满足您的需求。

http://www.appelsiini.net/projects/lazyload

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。它会延迟加载长网页中的图像。 视口(viewport)外的图像(网页的可见部分)在用户滚动到它们之前不会被加载。这与图像预加载相反。

在包含许多大图像的长网页上使用延迟加载可以加快页面加载速度。加载可见图像后，浏览器将处于就绪状态。在某些情况下，它还可以帮助减少服务器负载。 (以上摘自本站)

演示 pls visit这个页面，你就会知道这就是你要找的东西。

这是一种易于集成的东西，可以满足您的需求。

要在 Datalist 或 repeater 中制作它，您可以使用

<asp:Image ID="LazyImages" runat="server" 
  CssClass="lazy" src="img/BlankImage.gif" data-original="<%# Eval("URLofImageFromDB"))%>" />

您需要专注于 CssClass 和 SRC 属性，而绑定(bind)和其余部分由 jQuery 负责。

JQuery 的配置很重要。