Preloading images in HTML

Question

I want to preload these 4 images. I tried this:

&l         


        

Answer 1

This never actually appends anything to the DOM, I used an array to keep references of the created images, and pass them to an optional callback

var paths =  [
    "img/1.jpg",
    "img/1a.jpg",
    "img/1b.jpg",
    "img/1c.jpg"
];

preloadImages(paths);

function preloadImages(paths, callback) {
    var images = [];
    var loaded = 0;

    paths.forEach(function (path) {
        var img = new Image();
        img.src = path;
        img.onload = onImagePreloaded;
        images.push(img);
    });


    function onImagePreloaded() {
        loaded++;
        if (loaded === paths.length && callback) {
             callback(images);
        }
    }
}