0

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!

2
Contributors
1
Reply
15
Views
3 Years
Discussion Span
Last Post by theHop
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.