Why is my image gallery lagging when the image changes?

Question

on my live website that I created

there's a big problem I'm having. On the page linked to, which is also the home page of the site, there is an image gallery that performs the following functions: 1) I have a directory in my html file structure called public_html/images/lightbox where all of the images that will be displayed are stored. A php script (dynamically) takes the contents of that directory using the scandir function, and then takes that PHP array returned by this function, implodes it into a PHP string, assigns that PHP string to a javascript string, and then splits that javascript string to a javascript array (which stores the filepaths of the images stored in the public_html/images/lightbox directory.

2) There are two javascript functions called prev() and next(). next() is called automatically every 4.5 seconds, incrementing an indexing variable that moves through the array of images. This goes on in the background regardless of user interaction with the webpage; there is a counter that makes next() execute every 4500 ms using the method setTimeout.

3) The user can trigger the execution of prev() and next() by pressing two buttons, which are absolutely positioned relative to the div that contains the image gallery. Upon the pressing of either button, corresponding to either next() or prev() being called, either function is immediately executed, whereupon the timer for the next execution of next() will restart from 4500 ms.

It all works out fine, but when I first open the site with a web browser, the images lag upon changing. After the images have all been cycled through, they do not lag anymore (is this because they have been cached in the browser), but the first time it is viewed on a web browser, the lagging as the image URL/image is changed spoils the user experience and makes the website come across as poorly designed.

Here's the code: Many thanks.

 <?php
    $path = "images/lightbox/";
    $gallery = scandir($path);
    array_shift($gallery); array_shift($gallery);
    foreach($gallery as &$image) {
        $image = $path . $image;    
    }

    $gallery_string = implode(" ", $gallery);
    ?>

    <script>
    $(function() {
        $("#prev").on("click", $.prev);
        $("#next").on("click", $.next);
    });
    </script>
    <script>
    var gallery= new Array();
    var gallery_string = "<?php echo $gallery_string; ?>";
    gallery = gallery_string.split(" ");

    var ImageCnt = 0;

    $.prev = function(event) {
        if (ImageCnt == 0)  {   ImageCnt = gallery.length - 1;  } 
        else                                {   ImageCnt -= 1;                                  }
        $("#lightbox").css("background", "url(" + gallery[ImageCnt] + ")").css("background-size","670px");
        clearTimeout(t);
        t = setTimeout($.next, 4500);
        event.stopPropagation();
    }

    $.next = function(event){
        if(ImageCnt < gallery.length-1)     {       ImageCnt++;     }
        else {      ImageCnt = 0;   }
        $("#lightbox").css("background", "url(" + gallery[ImageCnt] + ")").css("background-size","670px");
        if(event != undefined) {
            clearTimeout(t);
            event.stopPropagation();
        }
        t = setTimeout($.next, 4500);
    }

    var t = setTimeout($.next, 4500);
    </script>

Answer 1

The lag has nothing to do with the script, it's however mainly due to these reasons

1. There're many resources being loaded on your site (images, sound).
2. The background music you have on is ~4.5 MB in size and that seems to be the main cause
3. This also depends on your hosting platform and speed

I recommend getting rid of the music, as besides causing the lag, it would in my opinion, affect the experience of your site visitor's. Also try using less graphics, use GIF/PNG when possible rather than JPEG, however, if you must use JPEG try compressing them.