1

Вот скрипт, который открывает около 200 картинок, при первом открытии веб-страницы загрузка 200 картинок происходит быстро. Слайд-шоу отображает только одно изображение за раз, как показано на рисунке. слайд-шоу

Однако если вы снова откроете страницу, то для загрузки этой же страницы во второй раз потребуется около 4 минут. Я думал, что если эти данные будут храниться в кэш-памяти, это было бы хорошей идеей, если их необходимо открыть заново.

    session_start();
    header('Cache-Control: post-check=0, pre-check=0', FALSE);
    header('Pragma: no-cache');


    if(!isset($_SESSION['token']) && (!isset($_SESSION['user']))){
        echo "<script language='javascript'>self.close();</script>";
    }
    require 'db.php';
    $upload_id = $_GET['id'];
    $client = $_GET['NAME'];
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Display | <?=$client;?></title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <?
    $myid = $_GET['myd'];
    $mydept = $_GET['dept'];
    $myrole = $_GET['role'];
    ?>

    <?
    //}
    // Retrieving Book mark page for this job (upload_id)
    $book = ("SELECT * FROM bookmark WHERE user_id = '".$_SESSION['id']."' AND upload_id='".$upload_id."'  ");
    $bk = mysqli_query($conn, $book) or die ("ERROR bookmark ".mysqli_error($conn));
    $bookmark = mysqli_fetch_assoc($bk);
    $page  = $bookmark['page_book'];


    ?>
    <div class="w3-container">
     <center>
    </div>
    <div class="w3-content w3-display-container">
    <?
    $s = ("SELECT count(USER_ID) as counter FROM upload_data WHERE UPLOAD_ID='".$upload_id."'");
    $r = mysqli_query($conn, $s) or die ("ERROR ".mysqli_error($conn));
    $c = mysqli_fetch_assoc($r);
    $all = $c['counter'];


    $sql = ("SELECT YEAR, FOLDER, USER_ID, FILE_NAME FROM upload_data WHERE UPLOAD_ID='".$upload_id."' ORDER BY USER_ID");
    $result = mysqli_query($conn, $sql) or die ("ERROR ".mysqli_error($conn));
    while($row = mysqli_fetch_assoc($result)){
        $file = $row['FILE_NAME'];
        //$all = $row['pages'];
        $year = $row['YEAR'];
        $folder = $row['FOLDER'];
        $id = $row['USER_ID'];
        $fileshow = "/$year/$folder/$file";
    ?>

    <div class="w3-display-container myPictures "  style="left: -15%; ">
        <img  src=<? echo $fileshow;?> style="width:130%; height: auto;" data-zoom-image=<? echo $fileshow;?>>
      <!--<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
        <?echo $id; ?>
      </div>-->
    </div>
    <?
    }
    ?>

     <button class="button5"  style="position: fixed; width: 100%; left: 20px; top: 140px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;" onclick="bookSave(0)">Save</button>&nbsp;
     <div id="display"  style="position: fixed; width: 100%; left: 30px; top: 372px;" ></div>&nbsp;
     <button  class="button2" style="position: fixed; width: 100%; left: 20px; top: 505px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;;" onclick="plusDivs(-10)">&#10094;&#10094;10-</button>&nbsp;
     <font><div id="bookmark" style="position: fixed; width: 100%; left: 20px; top: 190px; height: 60px; width: 100px;"></div></font></center>

    <div id="w20" class="clock"  style="position: fixed; top: 20px; left: 60%;"></div>

    <div class="message"  style="position: fixed; top: 20px; left: 50%;"></div>
    <button class="button" style="position: fixed; width: 100%; left: 20px; top: 410px; height: 50px; width: 100px; border-radius: 2px;"  onclick="plusDivs(-1)">&#10094; 前へ</button>
    <button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;"  onclick="plusDivs(1)">次へ &#10095;</button>
    <button  class="button2" style="position: fixed; width: 100%; left: 20px; top: 215px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;" onclick="plusDivs(10)">+10&#10095;&#10095;</button>&nbsp;
    </div>
    <?$hour = $_GET['t'];?>
    <!---------------------------------------- Next | Prev Functions ------------------------------------------------------->
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("myPictures");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("display").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "timer5.php", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id;?>&total=<?=$all;?>&myid=<?=$myid;?>&dept=<?=$mydept;?>&role=<?=$myrole;?>");
    <?if($_SESSION['id']==20000){?>
    function clock1(){
    var clock;

            $(document).ready(function() {

                clock = $('.clock').FlipClock({
                    clockFace: 'MinuteCounter'
                });
            });
    }
    var clock;

            $(document).ready(function() {

                clock = $('.clock').FlipClock(<?=$hour;?>, {
                    clockFace: 'MinuteCounter',
                    countdown: true,
                    callbacks: {
                        stop: function() {
                            //$('.message').html('message here');
                            clock1();
                        }
                    }
                });

            });
    <?}?>
    }
    </script>


    <!-- ---------------------------------Save BookMark Functions ---------------------------------------->
    <script>
    function bookSave(n) {

    if(confirm('Save and Close?')){
     var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("bookmark").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "booksave.php", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id;?>&myid=<?=$myid;?>");
     setTimeout("self.close()", 2000 ) // after 5 seconds
    }
     }
    </script>



    <!------------------------------------------------------ Call BookMark (PageNumber) when view ------------------------------------------------------------>
    <script>
    var slideIndex = <?=$page;?>;
    showBk(slideIndex);

    function bookMark(n) {
      showBk(slideIndex += n);
    }
    function showBk(n) {
      var i;
      var x = document.getElementsByClassName("myPictures");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("display").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "callbookmark.php", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id; ?>");
    }
    </script>
    </body>
    </html>

1 ответ1

1

Лучшая помощь, которую я могу дать - это «первый раз быстро, второй раз медленно», звучит так, как будто это проблема с кешем.

Тем более, что это совершенно противоположно тому, что должно произойти, если у вас хорошее кэширование.

Этот header('Cache-Control: no-store, no-cache, must-revalidate'); отключает кеширование - зачем ты это делаешь?

Я думаю, что происходит, когда вы в первый раз запускаете, действует некоторое кеширование - пока не будет достигнута эта строка. Что замедляет ход загрузки первой страницы и всей загрузки второй страницы.

Пожалуйста, удалите эту строку, попробуйте еще раз и сообщите, что происходит (или спросите на одном из https://webmasters.stackexchange.com/ или https://stackoverflow.com/ или, возможно, даже https://superuser.com/).

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .