Update reader.html

reader.html

@@ -130,42 +130,79 @@
 
   <script>
     const TOTAL_PAGES = 92;
-    let currentPage = 1;
-    const imageElement = document.getElementById('page-image');
-    const prevButton = document.getElementById('prev-button');
-    const nextButton = document.getElementById('next-button');
-    const pageNumberElement = document.getElementById('page-number');
-    const loadingMessage = document.getElementById('loading-message');
-
-    const updatePage = () => {
-      imageElement.src = `pages/${currentPage}.jpg`;
-      imageElement.alt = `Pagina ${currentPage}`;
-      prevButton.disabled = currentPage === 1;
-      nextButton.disabled = currentPage === TOTAL_PAGES;
-      const pageNumber = currentPage * 2 + 1;
-      pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
-      imageElement.style.display = 'none';
-      loadingMessage.style.display = 'block';
-    };
+let currentPage = 1;
+const imageElement = document.getElementById('page-image');
+const prevButton = document.getElementById('prev-button');
+const nextButton = document.getElementById('next-button');
+const pageNumberElement = document.getElementById('page-number');
+const loadingMessage = document.getElementById('loading-message');
 
-    imageElement.onload = () => {
-      imageElement.style.display = 'block';
-      loadingMessage.style.display = 'none';
-    };
+// Array to store preloaded images
+const preloadImages = [];
 
-    prevButton.addEventListener('click', () => {
-      if (currentPage > 1) {
-        currentPage--;
-        updatePage();
-      }
-    });
+// Function to preload images for given page numbers
+const preload = (pages) => {
+  pages.forEach(page => {
+    if (page >= 1 && page <= TOTAL_PAGES) {
+      const img = new Image();
+      img.src = `pages/${page}.jpg`;
+      preloadImages.push(img);
+    }
+  });
+};
+
+const updatePage = () => {
+  // Unload images that are no longer needed
+  const currentPages = [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];
+  preloadImages.forEach((img, index) => {
+    const page = img.src.split('/').pop().split('.')[0];
+    if (!currentPages.includes(page)) {
+      preloadImages.splice(index, 1);
+    }
+  });
+
+  imageElement.src = `pages/${currentPage}.jpg`;
+  imageElement.alt = `Pagina ${currentPage}`;
+  prevButton.disabled = currentPage === 1;
+  nextButton.disabled = currentPage === TOTAL_PAGES;
+  const pageNumber = currentPage * 2 + 1;
+  pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
+  imageElement.style.display = 'none';
+  loadingMessage.style.display = 'block';
+
+  // Preload next and previous 2 pages
+  const pagesToPreload = [
+    currentPage - 1, currentPage, currentPage + 1,
+    currentPage + 2, currentPage + 3,
+    currentPage - 2, currentPage - 3
+  ];
+  const uniquePages = pagesToPreload
+    .filter(page => page >= 1 && page <= TOTAL_PAGES)
+    .map(page => Math.floor(page))
+    .filter((value, index, self) => self.indexOf(value) === index);
+
+  preload(uniquePages);
+};
+
+imageElement.onload = () => {
+  imageElement.style.display = 'block';
+  loadingMessage.style.display = 'none';
+};
+
+prevButton.addEventListener('click', () => {
+  if (currentPage > 1) {
+    currentPage--;
+    updatePage();
+  }
+});
+
+nextButton.addEventListener('click', () => {
+  if (currentPage < TOTAL_PAGES) {
+    currentPage++;
+    updatePage();
+  }
+});
 
-    nextButton.addEventListener('click', () => {
-      if (currentPage < TOTAL_PAGES) {
-        currentPage++;
-        updatePage();
-      }
-    });
 
     let scale = 1;
     const zoomStep = 0.1;