Pre-loading images advice?

[pinandmountme]

Is it wise to pre-load images for an image-heavy website? I have lots of images on this website:

davidwightman.net

and wondered if creating pre-loaded css files would be a good way to speed up the site?

Any ideas or suggestions…

[Ampitere]

Using this script, you can call it on any page and have it preload images on other, image-heavy, pages. I call it on EVERY page on my website, this is because if you do and it loads as they’re beginning to browse the website (which it shouldn’t cause any problems with functionality because the web page will load before the script is called and run so long as you keep it at the bottom of your HTML/PHP files).

I think it’s a real necessity these days with people wanting things to load as quickly as possible. Like I mentioned it doesn’t cause any problems when using the website, and the only problem you may have is that the loading icon will be on for a longer period after the page has loaded (but this really has no negative effect, unless the users of the website are on a bad connection or old computer).

var images = new Array()

function preload() {

for (i = 0; i < preload.arguments.length; i++) {

images = new Image()

images.src = preload.arguments

}

}

preload(

"http://example.com/images/test.jpg",

"http://example.com/images/test2.jpg"

)

Make sure if you’re going to add more links that they always have the comma after the entry. But, make sure that the last one in the list does NOT have a comma.

Save the file as load.js or something along those lines. To call it on your website, just put it in like any other Javascript.

Let me know if you have any questions.

[pinandmountme]

Cool. Thanks. Would you recommend having all of the images on the website listed together or on several different JS files? I have about two hundred images on the site – all photographs of paintings. Also, are there any problems with HTTP requests the JS file might generate causing the initial load of the website to be slower than usual? Last question: if I am to use only one JS file for all of the images, then I should only attach this to index.html, right?

Thanks again

[Ampitere]

Like I said, it will begin preloading after the page has loaded provided the script is called near the bottom of the HTML file.. somewhere before the end of your < /body >.

You can use multiple JS files but I don’t really see a point, you only really want one anyway due to wanting fewer HTTP requests.

You’re free to attach it to whatever pages you want, like I said I use it on EVERY page so no matter what when people open a link to the website it will begin loading the images, AFTER it’s done loading the web page.

I can put together a little preview of how it works if you want.

[pinandmountme]

Yes please!

[Ampitere]

http://imagepreload.comyr.com/

Make sure you let it finish loading on the first page before going to the next one, this will show you that once you’ve gone to the next page nothing really needs to load since it’s just a bunch of images that we already loaded.

[pinandmountme]

That’s great! One last question: if a user clicks on a link from index.html to elsewhere on the site almost immediately on index.html loading, do the images from the JS file continue to load? Any other tips on implementing this?

[Ampitere]

@pinandmountme A solution to that would be to just keep the script on all pages. In the end, the single HTTP request really isn’t a big deal and your file really won’t change in size considering all you’re doing is adding a couple lines of text.

It does not however eliminate the HTTP request for the images, but I’m pretty positive that it doesn’t keep calling them to load once the image is actually loaded (considering once the images have loaded on my website, they don’t ever load again until my cache gets automatically reset when I close my browser).

Let me know if you need anything else.

[pinandmountme]

Thanks so much!

[pinandmountme]

OK, last question: is it possible to designate an image folder rather than the image name? I presume not, but just thought I’d check as I have dozens of folders and subfolders of images!

[pinandmountme]

Oh, and is there a quicker way to write the JS file considering I have hundreds of images in folders and subfolders?

[pinandmountme]

PS – I’m using Dreamweaver CS4…

[Ampitere]

Quicker way? Probably not. I think you may be able to load them from a folder, but I wouldn’t know how to do it.

I wouldn’t worry about it though, I’m sure it’d just be more of a hassle than writing all of the links out in the JS file.

[thomas]

I’m a little confused as to why you would need to preload the images. Based on the example that @Ampitere created, you’ll have an “entry” page that preloads the images, causing them to be cached by the browser, followed by a page that displays the images.

Why not just let the images load on the page normally? They’ll be cached anyway after that initial load, and it’s not something that is considered uncommon.

I understand that the upside to preloading them is that they appear almost instantly on the first page view, but you’re serving hundreds of images whether they are actual viewed on the next page or not. And if you include the script on every page, it will be like adding hundreds of images to every page, which takes up memory and slows down the browser.

[Ampitere]

@thomas Sometimes when people have a lot of images, the pages load time becomes excessively long. I know for a fact that websites that use the parallax effect functionality that it always takes ages to load because it’s general very image heavy.

I use it to load images that wouldn’t normally load because they’re part of a JS that, on mouse over, reveals an image. If I did not preload them, people would be stuck holding their mouse over the link and waiting for the image to load.

There are many different uses for the preload, and if you want to use it for images that would normally load on page load then I don’t see why you shouldn’t use it.

It’s not like your forcing tons of HTTP requests to repeat themselves.

[Author]

Posts