Image Effects : Image Preloader | JavaScriptSource

Image Effects : Image Preloader

Jeroen Haan Mar 19, 2007


This script will preload images to enable your pages to load faster. Place the images in one directory and make sure they have all the same extension (defaults to "jpg").

See the demo here


Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: imagePreloader.js


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document

Leave a Response


You would need to contact the author on that one.

Lee Oct 31, 2008

How cool would it be to be able to dynamically add images based on PHP, ASP or CFusion from a Database?[br /][br /]Will there be a future release for these ideas?[br /][br /]Cheers

Jayson Sep 10, 2008

Yes, in the section:[br /] preload('img1','img2','img3', ...[br /]these are the names of your images. (Names only, no path.)[br /][br /]Yes, in this section:[br /] "var dir = 'images/' // path to images"[br /][br /]this is the actual path, including the ending "/", to your images.

Lee Oct 26, 2007

I love the idea but have a few questions...[br /][br /]---------------------------------[br /]The section where you have:[br /]"addLoadEvent(function() {[br /]preload('img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12');[br /]});"[br /][br /]Are these the names of your images?[br /]Like: "<img src="images/img1.jpg" border="0">"[br /]---------------------------------[br /]Also this:[br /]"var dir = 'images/' // path to images"[br /]What is the correct syntax here for the path?[br /]With or wihout the opening and closing tags, "/"?[br /]---------------------------------[br /]Cheers

Jayson Oct 24, 2007

where do you put in the javascript file where the images file path is ?

martin May 13, 2007