如何使用 asp.net 在图像的数据列表中应用按需加载(延迟加载)概念? [英] how to apply the load on demand (Lazy loading) concept in datalist for Images using asp.net?

问题描述

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

In my asp.net application have one data list, page load event I have to bind number of image items(1000), how to apply the load on demand (What you can say Lazy loading of images) (when scrolling the page that time only bind the items like facebook new needs page)

基本上我不希望由于没有图像及其加载时间而导致页面加载延迟.我的代码是页面加载事件获取数据并绑定datalist

Basically I don't want page load delay due to no of images and their loading time. my code is page load event get the data and bind the 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();

推荐答案

好吧，您可以使用 jQuery 的延迟图像加载工具来做到这一点...这很棒，正好符合您的需求.

Well you can do this using jQuery's lazy image load tool... This is great and just fit your needs.

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

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

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

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

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. (Above is taken from the site)

对于演示请访问这个页面，你会知道这是您正在寻找的东西.

For demo pls visit this page and you would know that this is the thing you are looking for.

这是一个易于集成的东西，因此可以满足您的需求.

This is an easy to integrate stuff so fit your needs.

要在数据列表或中继器中制作它，您可以使用

To make it in Datalist or repeater you can do this using

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

您需要专注于 CssClass 和 SRC 属性，而绑定和休息由 jQuery 负责.

You need to concentrate on CssClass and SRC attribute while binding and rest is taken care by jQuery.

JQuery 的配置很重要.

Configuration of JQuery is important.

这篇关于如何使用 asp.net 在图像的数据列表中应用按需加载(延迟加载)概念?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！