Preloading images, anything i should know?

[Zonglars]

I'm likely gonna do some javascript preloading for most images on my site (particularly the full size ones in the galleries), and i just want to know if there are any potentially major issues with doing this, and where i should have the preloading done (aside from at the end of the page).

Just being careful

[Ryan Fait]

Might I suggest something like Lightbox? It's an awesome little app for galleries. It uses Ajax to load the images when they're clicked on so the user doesn't have to wait an extra minute for the thumbnails page to load.

Ajax is probably the best way to go, but if you want an instant gratification loading style, keep preloaded images to a minimum. I wouldn't go over 100kb personally.

[pa007]

It is possible to start loading the images as soon as the users hits the home page this would mean that some (or all depending on the amount and/or size) of the images would be stored in the cache when they got to your gallery page(s)and could mean almost instant loading of the pics. This is a pretty cool trick when used properly.

Pete.

[Zonglars]

well, yeah, but what if you're loading several dozen images? including some big ones of about 200kb each?

[pa007]

Well I don't see a massive problem with it to be honest. If you make sure the page loads fully first and then start to load them, it shouldn't really bother the user and although they might not all load, it will at least give them a head start so the load time on you gallery pages is less.

Just a possible solution to a potential problem. The alternative is to use thumbnails (actual thumbnails, not the proper image resized) and only load the full size image when the thumb is clicked. Maybe be better than loading all of the full size images in one go.

Try both and see what load times are like. 1 200kb image is one thing but ten or twenty may be a bit much even with fast connections. I find that pages on my sites are lighter now than they have ever been and I try to keep it that way. Have you considered using a JS image gallery (as ryan suggested) like lightbox or even building your own. It would possibly remove the problem of loading all images at once.

Pete.

[sannbe]

I have to agree with Pete's suggestion about using thumbnails and click for full size pictures. I am building a bookstore site where each listing has the cover of the book shown. Lost of images. All, I repeat, all are thumbnails. I changed this on my own when I realized how long it was taking to load pages using my little Apache server on my computer. And when I uploaded to test some pages....zoom...images on steriods.

[pa007]

And there are loads of apps out there that will create thumbnails of files en masse so you don't have do each one manually. They'll even leave the file name as it is and append somethin like '_thumb' to it so it easy to recognise but diffferentiate from the original.

Pete.

[Zonglars]

Already made the thumbnails myself, cause i want them all to be square, so i just do a zoomed in portion of the picture.

but how do you load *achoo!*... good god, my allergies are getting THAT bad?... where was I? oh yeah, how do you use javascript to load all the images at once? I'm sticking with my gallery design for now because it's relatively original, and the javascript only takes up 8 lines or so (just some DOM stuff), but if there's a way other than

Code: Select all

img1 = new Image();
img1.src = "http://www.host.com/username/pic.png";

I'd like to know, if it's more efficient without being too much more code.

[pa007]

Not sure, never really done. You'll have to do that for every single image you want to preload though which could be quite a lot of JS code. It should all be in an external file so it won't clog up your html but its still not ideal. I'm pretty sure there must be a simpler way than this for loading a lot of images. I'll have a little look and see I can find a method.

Pete.