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

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?

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.

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.

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?

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

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.

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