@Ampitere Thanks for the advice. I’ve started to implement it on the site and it’s working fabulously!
@thomas apart from the need to preload mouseover images, there isn’t really a need to have other images preloaded. Except that I’m fussy and want an image-heavy page to have every image appear instantly rather than gradually load. I’ve implemented all of the images for one link from the home page and none of the images on another link from the homepage. The preloaded images appear far more elegantly than the latter. I’m going to implement it on the entirety of my site, but only because it’s mostly made up of images.
Don’t get me wrong — I have nothing against preloading images, but as @pinandmountme mentioned, they’re typically for hover/mouseover effects. Preloading hundreds of images isn’t that common, and I wanted to know what his reasoning was.
Personally, if I wanted to improve how the page looked while it loaded, I would probably set aside blocks for where the images will appear when they load and have some kind of loading/spinner icon display until they loaded.
I still think that downloading hundreds of images for potential display on another page is wasted bandwidth, but in the end, it’s up to you and what you think is best for your website.
Surely the actual image appearing immediately is better than a loading/spinner icon? Especially when the images are photographs of paintings? I actually initially wanted a gradual load effect from left to right like on this site:
I agree that having the images appear immediately is better than loading/spinner icons until the images appear (which would only be on the first visit, btw), but the trade-off is that you don’t have to load hundreds of images into memory on pages that aren’t displaying any images — or expending extra bandwidth, when the visitor may not be interested in your gallery page (of course, that may be the only purpose of your site).
I honestly don’t see what the big deal is. Unless you have a lot of visitors on dial-up connections or you’re using massive images, they should load almost as fast as you can scroll down the page to see them. If your images are taking a long time to load, you should really consider optimizing them for better file size.
The example I gave was just a demonstration — you’ll need to modify it to fit your needs.
First, it places the images into a div with an ID of “more-images”, so you’ll need that if you want the images to appear. Second, it’s pulling random images from lorempixum. You’ll want to modify the JS to pull in your own images.