Show progress bar while downloading an Image in ASP.Net webform

Question

I am working on a website which has article section and display image for all articles on Home Page and Article List Page. Some of these images are uploaded as png and have size greater than 11KB.

Suppose i display 20 articles on page with 20 image. sometimes image take time to download. I want to show progress bar for each image that will be downloaded. I have looked for it on net but i am not able to get the right stuff.

I would appreciate if some one can point me in the right direction.

I am developing this website in ASP.Net 4.0, C#. I am using simple ASP.Net image control to display image now i want to integrate with some jQuery function so that it will show some sort of Loading... effect till image is actually downloaded

Something similar to http://rascals.eu/templates/rt0802/portfolios/portfolio-2-columns/

Take a look here http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript — Samich, Apr 19 '12 at 07:56

score 0 · Answer 1 · edited Apr 26 '13 at 18:53

0

You can place a loading in a div or span tag, and show or hide it when you want to show it. If you want to show it initially, just place a jQuery .hide() function on the div or span in the jQuery on ready function.

See the jQuery docs on show() and hide()

edited Apr 26 '13 at 18:53

Patrick D'Souza

3,491
2
22
39

answered Apr 19 '12 at 08:06

Ali

135
2
3
12

score 0 · Accepted Answer · answered Apr 19 '12 at 08:32

I FOUND easy solution using CSS

.ImageClass
{
      display: block;
      background-image: url('../images/loading-circle.gif');
      background-position: center center;
      background-repeat:no-repeat;
}

Works like charm.. I appreciate other answer which can also be useful

Show progress bar while downloading an Image in ASP.Net webform

2 Answers2