Best way to pre load images

Question

I have a single img tag on my page which is fed different sources from this array:

    preload_image_object = new Image();
    var images = new Array();
    images[0] = "images/01.jpg";
    images[1] = "images/02.jpg";
    images[2] = "images/03.jpg";
    images[3] = "images/04.jpg";
    images[4] = "images/05.jpg";

    //Preload images for faster page response
    for (var i=0; i < images.length; i++) {
        preload_image_object.src = images[i];
    };

I only display one image at a time but I find they are quite large (a few megs each). I need these to load initially so that when I go to the next image it will just appear. Currently there is a slight delay on the iPad I am developing this for.

What would be the best way to preload these images?

Thanks!

Answer 1

You could try a pure CSS image preload:

body:after {
  content: url("images/01.jpg") url("images/02.jpg");
  display: none;
}