Facing problem with loading images binded to a repeater control

Question

0.00/5 (No votes)

See more:

.NET3.5

Hi All,

I am facing problem with images loading time. In my form I have image server control placed in repeater control. The repeater control every time binds atleast 300 images. When we want to see all the images at a time the page is taking lot of time(atleast 3 to 4 mins) to display. But I need the page should be loaded fast.

The image url is from physical location.And the information related to image is coming from database.

I am using .net framework 3.5 and C#.net as language in asp.net web application.

How can this be solved??Can anyone suggest???

Thank you

Posted 2-Aug-10 0:48am

lathikala

Add a Solution

Comments

E.F. Nijboer 2-Aug-10 7:56am

Is this taking a lot of time because of bad performing code or is it just because it takes time to send those 300 images to the client. Are you using compressed images? Maybe you can try lazy loading:
http://webdevel.blogspot.com/2009/05/binding-data-to-repeater-using-lazy.html

Martin Jarvis 2-Aug-10 10:02am

How are you displaying these images, are you using a table? IE has an issue with large tables, it won't display any of the table content until the table close tag is received. This will mean IE will appear to hang whilst loading all of the markup.

Also, are the images being served from the same hostname? Browsers will limit the number on concurrent requests to the same hostname, which will make an image heavy page load slowly. You can see if this is the case by using FireBug in Firefox (or similar tool)

r.lawrence 4-Aug-10 7:22am

Hi, I saw your blog and it looks great. I am new to the blog, I want to display a theme in asp.net which should have a very good glossy feel. Can u tel me how can i do that in asp.net

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Al-Farooque Shubho · Answer 1 · 2010-08-11T07:02:00

This is my first ever answer to any question in CodeProject. Hope, this will help.

I see two probable performance issue here:

1. HTTP allows to allow 2 concurrent connections only per host, (6 concurrent connections in total, in IE8 and modern browsers) Among these two connections, one is reserved for loading JS files (Until all JS files is loaded) and another is reserved for loading other contents (markups, graphics etc).

So, in worst case, you will get only one connection to load all of your images one by one. In this case, even though your browser will send asynchronous URL request to the server, these request will be queued and will perform as synchronous request.

To solve this issue, you can use the concept of CDN (Content Delivery Network). That means, you expose your images using URLs that does not contain your host URL. In best case, you can use 3 such CDN sites for serving images (Say, images1.cdn.com, images2.cdn.com, images3.cdn.com) which would actually load the images from a single location and serve to browser request. Or, at least you can use a different CDN site for serving the images.

So, assuming that your browser have loaded all JS files and markups, it can use all 6 connections (2 per host) to load the images from the CDN sites (If you use 3 CDN sites for images). This will allow your browser to utilize its all permitted 6 connections simultaneously to load images asynchronously and will boost up performance.

Subsequent URL request for the same images from the browser should be served from the browser's cache and hence, images would load even faster.

2. Where do you store your images? In the database? Or, directly from the file system.
If the image data is loaded from the database, try to investigate the image retrieval operation's performance and see any performance improvement options. If the images are retrieved by any complex logic, try to cache the image to a pre-configured location in the disk and serve the images from the cache location on subsequent request. Even, consider storing the images in file system and serving from there, instead of storing in database (As this would give better performance).

Besides, you can investigate other parts of your codes (Data retrieval from the database, Data processing, ViewState etc) to optimize the overall performance.

Hope it helps. Cheers!