Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
847 views
in Technique[技术] by (71.8m points)

c# 4.0 - how to apply the load on demand (Lazy loading) concept in datalist for Images using asp.net?

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)

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();
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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 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"))%>" />

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

Configuration of JQuery is important.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...