Question

I have a portfolio web app that is run on Sinatra using pjax. If you click ‘WORK’ and go into each project, you’ll see the images load. I want the images to load in the background right when you visit masedesign.com.

Loading the entire site (approx. 25MB) will cost alot in terms of bandwidth. Perhaps I should load on the first images for each project.

How should I be preloading images in the img tag?

Answer 1

var images = ['my.jpg', 'cool.jpg', 'images.jpg'];

$.each(images, function(key, value) { 
    (new Image()).src = value;
});

it is using jQuery though, write less do more…