When slide show web page is reopen, the web page loading is very slow












0












$begingroup$


Here is a script that opens about 200 pictures, the first time you open the webpage, loading of the 200 pictures is fast, However if you reopen the page, it takes about 4 minutes to load the same page the second time. Please advice.



    session_start();
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
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>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w4.css">
<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 = "/unix/upload/$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)">❮❮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)">❮ 前へ</button>
<button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(1)">次へ ❯</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❯❯</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


>










share|improve this question







New contributor




A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$

















    0












    $begingroup$


    Here is a script that opens about 200 pictures, the first time you open the webpage, loading of the 200 pictures is fast, However if you reopen the page, it takes about 4 minutes to load the same page the second time. Please advice.



        session_start();
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Cache-Control: no-store, no-cache, must-revalidate');
    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>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/w4.css">
    <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 = "/unix/upload/$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)">❮❮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)">❮ 前へ</button>
    <button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(1)">次へ ❯</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❯❯</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


    >










    share|improve this question







    New contributor




    A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$















      0












      0








      0





      $begingroup$


      Here is a script that opens about 200 pictures, the first time you open the webpage, loading of the 200 pictures is fast, However if you reopen the page, it takes about 4 minutes to load the same page the second time. Please advice.



          session_start();
      header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
      header('Cache-Control: no-store, no-cache, must-revalidate');
      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>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/w4.css">
      <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 = "/unix/upload/$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)">❮❮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)">❮ 前へ</button>
      <button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(1)">次へ ❯</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❯❯</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


      >










      share|improve this question







      New contributor




      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      Here is a script that opens about 200 pictures, the first time you open the webpage, loading of the 200 pictures is fast, However if you reopen the page, it takes about 4 minutes to load the same page the second time. Please advice.



          session_start();
      header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
      header('Cache-Control: no-store, no-cache, must-revalidate');
      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>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/w4.css">
      <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 = "/unix/upload/$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)">❮❮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)">❮ 前へ</button>
      <button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(1)">次へ ❯</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❯❯</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


      >







      javascript php cache






      share|improve this question







      New contributor




      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 14 mins ago









      A. KiyoshiA. Kiyoshi

      1




      1




      New contributor




      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      A. Kiyoshi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          0






          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "196"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          A. Kiyoshi is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213496%2fwhen-slide-show-web-page-is-reopen-the-web-page-loading-is-very-slow%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          A. Kiyoshi is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          A. Kiyoshi is a new contributor. Be nice, and check out our Code of Conduct.













          A. Kiyoshi is a new contributor. Be nice, and check out our Code of Conduct.












          A. Kiyoshi is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213496%2fwhen-slide-show-web-page-is-reopen-the-web-page-loading-is-very-slow%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Create new schema in PostgreSQL using DBeaver

          Deepest pit of an array with Javascript: test on Codility

          Costa Masnaga