How to improve performance in image loading on web application? RRS feed

  • Question

  • I have a web application running on local host. The requirement is to load multiple rectangular jpg images (96 images, average 7k in size each) and show on home page when it runs. Images are showed in a grid of 8x12 rows/columns. I am loading image by setting the 'src' attribute of the 'img' in javascript. The url assigned to the 'src' attribute is same for all images but the image id is different. Images are loading but the main issue is that they are not loading very quickly and they are some what loading in a sequence means 1,2,3,4... and so on but some images are not loaded in sequence. I want to improve the performance of this page. I have tried the figure out the timings at different points like:

    1. When call is originated form client (image src attribute is set)

    2. When server is receiving call. (the page on server which serve individual image)

    3. When server is about to return the image.

    4. When on client side image is received/showed  (image loaded event called in javascript)

    It turned out after looking at the collected data that main time is lost between 1 and 2 above that is between the client side call is originated and server is receiving call for a particular image.

    I have also tried setting parameters like maxWorkerThreadsminWorkerThreadsrequestQueueLimit and maxconnection in machine.config but no significant improvement yet.

    Can someone please help me in this situation as i am stuck here since many days and i am really short of time now. Desperately needs to improve the performance of these images loads.

    Thanks in advance.

    Wednesday, July 18, 2012 2:02 PM

All replies