Preloading images

Posted on 16th Feb 2014 by admin

Posting this question here because I am not sure where this should belong.I am building an asp.net ajax web site with lots of media elements and I would like to make my image loading work smoother. I have an aspx page where I have 1 - 70 thumbnail pictures. Those are Imagebutton controls generated by code actually. Then I have some clientside javascript code behind those thumbnails, which is used to load the real image into an image control when a thubmnail is clicked. document.getElementById("Image1").src = "MediaHandler.ashx?mediaid=" + imageidSo I am using an imagehandler file to return images from database. Large images are opened in a modal popup and user can browse images with next and previous buttons within this modalpopup. I actually have 3 asp:Image controls on my page. One for that image user has selected, this is the only image which is visible on the modal popup, other image controls are hidden from the user. I am loading previous and next images to these other two image controls. So when a user is browsing to the next image, the image is not downloading from database, but is retrieved from the other image control with client side code.
I am wondering if it is possible to preload all the images somehow. Like I said there can be up to 70 images on one page, but usually there is about 10 images. Image sizes are between 150 and 300 KB.
Should I put more image controls on the page and load more images into them, or could I use javascript preloader? Or is there an asp.net server side control for this purpose? Should I preload first 10 images which are most commonly used and leave those other images to be loaded later when user is trying to access them?
I know it might be hard to understand what I mean, but I am after general ideas rather than an exact solution.

Other forums