5

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!

FunkyMonk91
  • 1,469
  • 1
  • 17
  • 30
  • Extra to my answer, if you first image is what's shown at the start, exclude it from the preloader – atmd Oct 19 '12 at 18:33
  • Here's a short function in one of my previous answers to preload a number of images: https://stackoverflow.com/questions/8450068/is-there-a-way-to-load-images-to-users-cache-asynchronously/8450190#8450190 and a little more advanced version that offers a callback when all images are preloaded: https://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310. – jfriend00 Oct 19 '12 at 18:27

3 Answers3

3

You could try a pure CSS image preload:

body:after {
  content: url("images/01.jpg") url("images/02.jpg");
  display: none;
}
kioopi
  • 2,170
  • 2
  • 18
  • 26
  • Thanks! I don't think that this will help me to much for this project but I will definitely remember that for the future! – FunkyMonk91 Oct 19 '12 at 20:00
0

Any form of preloading an image will use the same method, as yours and the one from jfriend00. Even using jquery does the same thing.

You could optimise the loop (catch the length of the array etc) but its a small saving.

You would see more noticeable optimising the images them selves

Are CSS sprites an option?

atmd
  • 7,430
  • 2
  • 33
  • 64
  • Negative, we want this to have as little user intervention as possible. Ideally we will just be putting images into a folder and the system does the rest. Thank you though! – FunkyMonk91 Oct 19 '12 at 19:00
  • Right I see. Can't see anything better than what your using the. Are the images uploaded to a cdn? Might save you a bit of load time – atmd Oct 19 '12 at 19:03
-2

Use this. ask if something you dont understand.

jQuery(document).ready(function () {           
    preload([
        'path to img 1',
        'path to img 2',
        .... array of all images

    ]);

    function preload(images) {
        if (typeof document.body == "undefined") return;
        try {    
            var div = document.createElement("div");
            var s = div.style;
            s.position = "absolute";
            s.top = s.left = 0;
            s.visibility = "hidden";
            document.body.appendChild(div);
            div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
            var lastImg = div.lastChild;
            lastImg.onload = function () {
                document.body.removeChild(document.body.lastChild);
            };
        }
        catch (e) {
            // Error. Do nothing.
        }
    }
});
Vladimir Gordienko
  • 3,260
  • 3
  • 18
  • 25
  • 1
    Surely this would delay loading not pre load? – atmd Oct 19 '12 at 18:32
  • its cross browser preload script, try to read more attentively – Vladimir Gordienko Oct 19 '12 at 18:36
  • 1
    But your saying to load the images once the Dom has loaded, so if you load at the end, it's not really preloading, unless the image change by some user event and you exclude the default/first image – atmd Oct 19 '12 at 18:41
  • Actually aren't you damaging performance by adding and removing elements to the Dom? – atmd Oct 19 '12 at 18:42
  • yes, you right, but it visible in a big project where you must preload ~100-150 images, others methods wich i use all not works in other browsers, it is not – Vladimir Gordienko Oct 19 '12 at 19:15
  • 2
    There is no reason to insert the images into the DOM (they will still preload even if not inserted into the DOM) and thus there is no reason to wait for the DOM to load as this just delays the start of the preload and makes it take longer. – jfriend00 Oct 19 '12 at 21:05
  • you must add to this array, as sample, hover images, when page loded they already been in user cash, so it removes bliking on hover event. outcomes of do this, - reason there, You can correct me of course – Vladimir Gordienko Oct 19 '12 at 22:54