javascript - 画像が変更されたときに画像ギャラリーが遅れるのはなぜですか?

Question

私が作成した私のライブウェブサイトで

私には大きな問題があります。サイトのホームページでもあるリンク先のページには、次の機能を実行する画像ギャラリーがあります。が表示され、保存されます。PHP スクリプトは (動的に) scandir 関数を使用してそのディレクトリの内容を取得し、この関数によって返された PHP 配列を取得して PHP 文字列に分解し、その PHP 文字列を JavaScript 文字列に割り当て、その JavaScript 文字列を分割します。 javascript 配列 ( public_html/images/lightbox ディレクトリに保存されている画像のファイルパスを保存します。

2) prev() と next() という 2 つの JavaScript 関数があります。next() は 4.5 秒ごとに自動的に呼び出され、画像の配列を移動するインデックス変数をインクリメントします。これは、Web ページに対するユーザーの操作に関係なく、バックグラウンドで実行されます。メソッド setTimeout を使用して、4500 ミリ秒ごとに next() を実行するカウンターがあります。

3) ユーザーは、画像ギャラリーを含む div に対して絶対位置にある 2 つのボタンを押すことで、prev() と next() の実行をトリガーできます。呼び出された next() または prev() に対応するいずれかのボタンを押すと、いずれかの関数がすぐに実行され、next() の次の実行のタイマーが 4500 ミリ秒から再開されます。

それはすべてうまくいきますが、最初に Web ブラウザーでサイトを開くと、画像の変更に遅れが生じます。画像がすべて循環された後、それらはもう遅れることはありません (これは、ブラウザにキャッシュされているためです)。ユーザーエクスペリエンスが低下し、ウェブサイトのデザインが不十分であると思われます。

コードは次のとおりです。どうもありがとう。

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