Вот скрипт, который открывает около 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>
<div id="display" style="position: fixed; width: 100%; left: 30px; top: 372px;" ></div>
<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>
<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>
</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>