Pre-loading images advice?
# September 22, 2011 at 12:59 pm
@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.# September 22, 2011 at 1:32 pm
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.# September 22, 2011 at 3:20 pm
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:
But no one seemed to know how to do it…
Any ideas?# September 22, 2011 at 8:43 pm
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.
EDIT: I just realized that you were referring to the dynamic loading as the page scrolled down. Here’s a revision of the above: http://jsfiddle.net/5P5wk/2/# September 23, 2011 at 5:15 am
That looks great. I’ve tried to put it onto one of my pages, but it doesn’t work. I’m sure I’m doing something wrong. But I just don’t know what. Any ideas?
The page I’m using it on as a test is here:
As you can probably see, images just aren’t appearing.
I’ve put the JS in the:
at the bottom. And the css in:
at the top. I don’t understand why it wouldn’t work. Please help!# September 23, 2011 at 6:29 am
This reply has been reported for inappropriate content.
Something to do with the fact you are using a JQuery image pre-loader but have made no reference to JQuery anywhere in your html ;-)
In situations like this, your browser debug tools are your friend!
Uncaught ReferenceError: $ is not defined# September 23, 2011 at 12:01 pm
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.# September 24, 2011 at 1:05 pm
In order to dynamically load content on the page, you’ll have to use JS. If you plan on making similar websites in the future, it’s definitely something that will be beneficial to learn.
You must be logged in to reply to this topic.