1

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();
hmk
  • 969
  • 10
  • 38
  • 70
  • try what I have suggested and believe me this should work; as far as I know this would not require any code level changes in above method c# level. – Jigar Pandya Sep 13 '12 at 06:36

3 Answers3

2

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.

Jigar Pandya
  • 6,004
  • 2
  • 27
  • 45
  • how to use Lazy load concept in dataset binding time, how to handel , pls give one simple example – hmk Sep 13 '12 at 05:08
  • This should solve your problem; I have 10K+ Images and they are coming from ULR's and i test it with above tool; It load the page in less then one second. – Jigar Pandya Sep 13 '12 at 05:09
  • my problem is how to handle the code give me one simple example in asp.net datalist if u dont mine – hmk Sep 13 '12 at 05:24
  • ya , but there is no code , it looking nice , just send me some code to handle the data list – hmk Sep 13 '12 at 05:29
1

There is not any built in function in asp.net to do this task.But you may use jquery plugin for this purpose.

Lazy loader delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down.

For details see a link. http://archive.plugins.jquery.com/project/lazyload

4b0
  • 21,981
  • 30
  • 95
  • 142
0

The DataList is not meant for this purpose. You are better off using javascript and ajax calls.

Have a url that takes the StartIndex and Count of as parameters and list our the urls to show. Then just append them in using javascript.

nunespascal
  • 17,584
  • 2
  • 43
  • 46