Update reader.html

reader.html

@@ -26,24 +26,16 @@
       align-items: center;
     }
 
-    #page-image, #next-page-image {
-      position: absolute;
+    #reader-container img {
       width: 100%;
       height: auto;
       transform-origin: center center;
-      transition: opacity 0.2s ease;
+      transition: transform 0.3s;
       cursor: grab;
-      opacity: 1;
-      z-index: 1;
-    }
-
-    #next-page-image {
-      opacity: 0;
-      z-index: 0;
     }
 
     @media (min-width: 768px) {
-      #page-image, #next-page-image {
+      #reader-container img {
         height: 90vh;
         width: auto;
       }
@@ -122,8 +114,7 @@
   <div id="reader-container">
     <div id="page-number"></div>
     <input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
-    <img id="page-image" src="pages/1.jpg" alt="Pagina 1">
-    <img id="next-page-image" src="" alt="" style="display: none;">
+    <img id="page-image" src="pages/1.jpg" alt="Pagina 1" loading="eager" style="display: none;">
     <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
   </div>
 
@@ -135,76 +126,82 @@
   <script>
     const TOTAL_PAGES = 92;
     let currentPage = 1;
-    const currentImageElement = document.getElementById('page-image');
-    const nextPageImageElement = document.getElementById('next-page-image');
+    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');
 
-    // Function to update the displayed page with cross-fade
-    const updatePage = (newPage) => {
-      currentPage = newPage;
+    const preloadImages = [];
+
+    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 = () => {
+      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';
+
+      const pagesToPreload = [
+        currentPage - 1, currentPage, currentPage + 1,
+        currentPage + 2, currentPage + 3,
+        currentPage - 2, currentPage - 3
+      ];
+      preload(pagesToPreload.filter(page => page >= 1 && page <= TOTAL_PAGES));
+    };
 
-      // Load the new image into the next image element
-      nextPageImageElement.src = `pages/${currentPage}.jpg`;
-      nextPageImageElement.alt = `Pagina ${currentPage}`;
-
-      // Start the cross-fade transition
-      currentImageElement.style.opacity = '0';
-      nextPageImageElement.style.opacity = '1';
-      nextPageImageElement.style.zIndex = '2';
-
-      setTimeout(() => {
-        // Swap the images
-        [currentImageElement.src, nextPageImageElement.src] = [nextPageImageElement.src, ''];
-        currentImageElement.style.opacity = '1';
-        currentImageElement.style.zIndex = '1';
-        nextPageImageElement.style.opacity = '0';
-        nextPageImageElement.style.zIndex = '0';
-      }, 200); // Match the transition duration (0.2s)
+    imageElement.onload = () => {
+      imageElement.style.display = 'block';
+      loadingMessage.style.display = 'none';
     };
 
-    // Event listeners for buttons
     prevButton.addEventListener('click', () => {
       if (currentPage > 1) {
-        updatePage(currentPage - 1);
+        currentPage--;
+        updatePage();
       }
     });
 
     nextButton.addEventListener('click', () => {
       if (currentPage < TOTAL_PAGES) {
-        updatePage(currentPage + 1);
+        currentPage++;
+        updatePage();
       }
     });
 
-    // Keyboard navigation
-    window.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowLeft' && !prevButton.disabled) {
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowLeft') {
         prevButton.click();
-      } else if (e.key === 'ArrowRight' && !nextButton.disabled) {
+      } else if (e.key === 'ArrowRight') {
         nextButton.click();
       }
     });
 
-    // Handle page input
     function handlePageInput(value) {
       const pageNumber = parseInt(value);
       if (!isNaN(pageNumber)) {
-        let newPage = Math.ceil(pageNumber / 2);
-        if (newPage < 1) newPage = 1;
-        if (newPage > TOTAL_PAGES) newPage = TOTAL_PAGES;
-        updatePage(newPage);
+        if (pageNumber % 2 === 0) {
+          currentPage = pageNumber / 2;
+        } else {
+          currentPage = (pageNumber - 1) / 2;
+        }
+        updatePage();
       }
     }
 
-    // Initialize the first page
-    updatePage(1);
+    updatePage();
   </script>
 </body>
-</html>
+</html>