Click here to Skip to main content
15,072,933 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
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

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!
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900