JavaScript Image Preloading

Here are various JavaScript methods for preloading images you will be using in a webpage. Its up to you to decide when the right time to use it.

Code Example: Single Image

var homeRollOver = new Image(250,250);
homeRollOver.src = "/images/home_hover.jpg"

Code Example: Multi-Image

var imageDir = "/images/";
var images = new Array;

images[0] = new Array("home_hover.jpg",250,250);
images[1] = new Array("blocked.jpg",64,64);
images[2] = new Array("sun_icon.jpg",128,128);

var imageCache = loadImages(imageDir,imageCache);

function loadImages(path,images) {
var imageCache = new Array;
for (var i=0; i<images.length; i++){
imageCache[i] = new Image(images[i][1],images[i][2]);
imageCache[i].src = (path + images[i][0]);
return (imageCache);

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#,, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s