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

Question

on my live website that I created

есть большая проблема, с которой я сталкиваюсь. На связанной странице, которая также является домашней страницей сайта, есть галерея изображений, которая выполняет следующие функции: 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 мс.

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

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

<?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, попробуйте сжать их.