Slide show doesn't load images completely before starting the show

[Moderns]

I have created a slide show to load images, it should start the slide show after loading the images completely in the cache of the browser.

The problem, the images are not loaded completely. When the slide show starts, I notice delay in viewing images. I would greatly appreciate your inputs to get the slide show working properly! I am not interested to use the Jquery.

Below is the code:

function loadImages(ob){

        ob.arrayImages=[];

        for(var i=0;i<ob.imagesCount;i++){
            ob.arrayImages.push(ob.arrayImagesPath[i]);
        }

        ob.arrayComplete=[];

        for (var i = 0; i <ob.arrayImages.length; i++){
            var imageObj = new Image();

            imageObj.src = ob.arrayImages[i]+'?' + '16092013';    // updated with a date to avoid getting cached image

            imageObj.onload= (function(i){

                return function(){

                    ob.arrayComplete.push(i);

                    if(ob.arrayComplete.length==ob.arrayImages.length){

                        startSlideShow(ob);  // here, images should be loaded completely!
                    }
                }
            })(i);
        }
    }



    function startSlideShow(ob){

        document.getElementById(ob.imagesContId).className='slide slide'+ob.step;

        timer=setTimeout(function(){

            if(ob.step<ob.imagesCount)
                ob.step++;
            else
                ob.step=1;

            startSlideShow(ob);

         }, 3000);
    }


    <style>
        .slide1{background-image: url(http://statics.abc.com/ic/slide1.jpg?16092013)}
        .slide2{background-image: url(http://statics.abc.com/ic/slide2.jpg?16092013)}
        .slide3{background-image: url(http://statics.abc.com/ic/slide3.jpg?16092013)}
        .slide4{background-image: url(http://statics.abc.com/ic/slide4.jpg?16092013)}
        .slide5{background-image: url(http://statics.abc.com/ic/slide5.jpg?16092013)}
    </style>

Thanks for your help!

[theHop]

might just be that the images need to be optimised for the web. you could add a small delay

setTimeout(function(){
    startSlideShow(ob);
},2000); 

added delay of 2 seconds but you would need to change this to whatever you feel is right.