Pre-loading images advice?

[pinandmountme]

@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.

[thomas]

@Ampitere
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.

[pinandmountme]

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:

http://iwanttoseemymountains.tumblr.com/archive

But no one seemed to know how to do it…

Any ideas?

[thomas]

@pinandmountme
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.

As for the fade effect on the website you mentioned, it appears to be using Prototype to fade in the images after page load, although jQuery or plain JavaScript could be used to create a similar effect. Here’s a quick example that you can modify to fit your needs:

http://jsfiddle.net/Zrzhp/

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/

[pinandmountme]

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:

http://www.davidwightman.net/abstraction2.html

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!

[pinandmountme]

Something to do with my html, perhaps?

[pinandmountme]

What do I do?!

[pinandmountme]

I’ve done what you said, but now images don’t show up at all! Any chance you can figure out what I’m doing wrong this time?

[thomas]

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.

[pinandmountme]

Ah, sorry. My JS knowledge is zero. Back to the drawing board unless anyone has any other suggestions?

[thomas]

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.

Start with some simple tutorials (there are plenty online), and once you have a feel for the basics, look for information on specific things you’d like to try. Everyone has to start from somewhere.

[Daniel_S]

@Ampitere That code prevent loading images if they are already cached? Thanks.

[Author]

Posts