Member Avatar for 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!

  • 2 Contributors
  • 1 Reply
  • 224 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by theHop
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.