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()}
        .slide2{background-image: url()}
        .slide3{background-image: url()}
        .slide4{background-image: url()}
        .slide5{background-image: url()}
    </style>

Thanks for your help!

  • 2 Contributors
  • 1 Reply
  • 241 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by theHop

Dani AI

Generated

A few likely causes and a reliable way forward.

If images are re-requested or decoded only when painted, the slideshow will still pause even if your preloader's onload fired. Also, forcing a cache-busting query string every run prevents reuse of the browser cache — that defeats preloading. , remove per-run cache-busting and rely on proper server cache headers or versioned filenames so the browser can reuse cached bytes. ’s setTimeout works only by chance and won’t fix decoding or cache issues.

Short checklist to fix immediately

  • Stop adding a changing query string on every load; use versioned filenames or proper Cache-Control on the server.
  • Watch DevTools Network to confirm images are served from memory/disk cache (or 304).
  • Add onerror handling so a failed image doesn't hang your preload.
  • Optimize images (resize, compress, modern formats like WebP/AVIF) to reduce decode time.

A robust preload pattern (modern browsers)

  • Preload and force decode, then start the slideshow only when all images are decoded. Example approach using image.decode() and Promise.all:
function preloadAndDecode(urls){
  return Promise.all(urls.map(url => {
    const img = new Image();
    img.src = url;
    return img.decode ? img.decode().catch(()=>{}) : new Promise(r => img.onload = r);
  }));
}

preloadAndDecode(slideUrls).then(() => startSlideShow());

If you need stronger guarantees, use <link rel="preload" as="image"> for critical slides or fetch blobs + createImageBitmap() to ensure decoded bitmaps. Finally, consider using offscreen/hidden <img> elements or small crossfade transitions so a single-frame decode hiccup is less visible.

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.