Почему моя галерея изображений отстает при изменении изображения?

Question

на моем живом сайте, который я создал

У меня большая проблема. На связанной странице, которая также является домашней страницей сайта, есть галерея изображений, которая выполняет следующие функции: 1) У меня есть каталог в структуре моего html-файла, который называется public_html/images/lightbox, где находятся все изображения, которые будут отображены сохранены. Сценарий php (динамически) берет содержимое этого каталога с помощью функции scandir, а затем принимает массив PHP, возвращаемый этой функцией, внедряет его в строку PHP, назначает эту строку PHP строке javascript и затем разбивает эту строку javascript в массив javascript (который хранит пути к файлам изображений, хранящихся в каталоге public_html/images/lightbox.

2) Есть две функции JavaScript, называемые prev() и next(). next() вызывается автоматически каждые 4,5 секунды, увеличивая индексную переменную, которая перемещается через массив изображений. Это происходит в фоновом режиме, независимо от взаимодействия пользователя с веб-страницей; есть счетчик, который заставляет next () выполняться каждые 4500 мс, используя метод setTimeout.

3) Пользователь может запустить выполнение prev() и next (), нажав две кнопки, которые абсолютно расположены относительно div, содержащего галерею изображений. При нажатии любой кнопки, соответствующей либо вызываемому next (), либо prev(), сразу же выполняется любая из функций, после чего таймер следующего выполнения next () будет перезапущен с 4500 мс.

Все работает нормально, но когда я впервые открываю сайт с помощью веб-браузера, изображения меняются при изменении. После того, как все изображения циклически пройдены, они больше не задерживаются (это потому, что они были кэшированы в браузере), но при первом просмотре в веб-браузере запаздывание при изменении URL/ изображения изображения портится. пользовательский опыт и делает сайт выглядит плохо разработанным.

Вот код: Большое спасибо.

 <?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

Лаг не имеет ничего общего со сценарием, однако, в основном, по этим причинам

1. На ваш сайт загружается много ресурсов (изображения, звук).
2. Размер фоновой музыки у вас составляет ~4,5 МБ, и это, кажется, является основной причиной
3. Это также зависит от вашей хостинговой платформы и скорости

Я рекомендую избавиться от музыки, так как, помимо этого, это, на мой взгляд, повлияет на опыт посетителей вашего сайта. Также попробуйте использовать меньше графики, используйте GIF/PNG, когда это возможно, а не JPEG, однако, если вы должны использовать JPEG, попробуйте сжать их.