var img = new Image();
img.onload = callbackFunction;
img.src = 'http://source.of/image.png';
If you use this a lot, just create a function for it:
function preloadImage (src, callback) {
var img = new Image();
img.onload = callback;
img.src = src;
return img;
}
If you want to fire a callback when all the images have loaded, use a deferred object:
function preloadImages (paths, callback) {
var deferreds = [];
$.each(paths, function (i, src) {
var deferred = $.Deferred(),
img = new Image();
deferreds.push(deferred);
img.onload = deferred.resolve;
img.src = src;
});
$.when.apply($, deferreds).then(callback);
}