1

Here is a script that opens about 200 pictures, the first time you open the webpage, loading of the 200 pictures is fast. The slideshow display only one picture at a time as shown in the picture. slideshow

However if you reopen the page, it takes about 4 minutes to load the same page the second time. I was thinking if these data is stored in the cache memory, that would be a great idea if needs to be reopened.

    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
    Please read the two tags you chose for this post. Both point you to the fact that programming questions are off-topic here at superuser. – n8te Feb 15 at 5:53
  • 1
    @n8te sorry if my tag is not proper for the question, what should be the tag? can you help me out, maybe it might get someone who understand the question...please – A. Kiyoshi Feb 15 at 5:57
  • 1
    No, I'm not saying you chose the wrong tag. I'm saying your question is off-topic for superuser. Programming questions belong on Stack Overflow. – n8te Feb 15 at 5:58
  • @n8te sorry for the inconvenient, actually I cannot post a question in Stack Overflow. That is why I ask here ... – A. Kiyoshi Feb 15 at 6:00
  • 1
    Also, did you know there is a Japanese Stack Overflow? – n8te Feb 15 at 6:30
1

The best help that I an give is "first time fast, second time slow" sounds like it has to be a cache problem.

Especially as that is exactly the opposite of what should happen if you have good caching.

That header('Cache-Control: no-store, no-cache, must-revalidate'); is turning off caching - why do you do that?

What I think is happening is that the first time you run, there is some caching in effect - until that line is hit. Which slows things for the rest of the first page load and for all of the second page load.

Please remove that line, try again and report back what happens (or ask on one of https://webmasters.stackexchange.com/ or https://stackoverflow.com/ or maybe even https://superuser.com/).

  • 1
    thank you Mawg I updated my question to draw a clear picture of my question. although I have added and removed that particular line, still no change. – A. Kiyoshi Feb 25 at 7:47
  • oops, I just noticed header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); which will also mean that the page is never cached. Please remove both of those lines & let us know what happens. Sorry that I missed that first time round. – Mawg Feb 25 at 7:50
  • 1
    I have removed the lines, still the same. The code was originally without a cache, I tried with cache still no luck. – A. Kiyoshi Feb 25 at 7:53
  • 1
    Thank you for the reply. I will try your suggestion. It seems like, with or without the cache header, the first time it loads its okay. However, if you close the page and reopen again, it takes about 4 to 5 mins to load the page and display the slideshow. About 200 pictures, however only 1 picture is displayed. – A. Kiyoshi Feb 26 at 0:43
  • 1
    Thanks Mawg, I will try narrow it down... perhaps it might help – A. Kiyoshi Feb 26 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.