loading small version of images at page load

Question

I'm using VS2010,C# to develop my ASP.NET web app, I display several big images (around 50KB in size) in a page, and it takes time, of course initially just some small versions of these images are displayed, then user can click on each image and the real size image would be displayed in a lightbox. But as I load the full size images for displaying the thumbnails, it takes a lot of time for loading the page, is there any way that I can load only a small size of each image? is there any way that I can reduce my load time and display thumbnails of images? what are my options, help me please

Answer 1

you can do two things one create thumbnail and load them rather loading your main images and also you can imply lazy loading means you only load images those are immediately required in viewport that will certainly help your cause.

Link for lazy loading

Answer 2

best to use Thumbviewer. It is so easy to use and you'll be surprise how efficient it works.

<bri:ThumbViewer ID="ThumbViewer2" runat="server" ImageUrl="~/images/Scissors.jpg"
                    Title="Tailors Scissors" ThumbUrl="~/thumbs/Scissors.jpg" Height="75px" Width="90px" ModalImagePadding="40px" />

you can find demo here : Thumbnail-Image-Viewer-Control-for-ASP.Net

Answer 3

No, there is no way. If you create a thumbnail on the fly, the whole image has to be loaded, which defeats the purpose.

You could create the thumbnails ahead of time.