From 4ad80936823bf239459751246c2bb4f64c0e5764 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Tue, 25 Mar 2025 17:53:37 +0100
Subject: [PATCH] =?UTF-8?q?Refactor=20Pok=C3=A9mon=20display=20structure?=
 =?UTF-8?q?=20and=20improve=20image=20preloading=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v2/index.html | 12 +++++++++++-
 v2/pokemon.js | 21 +++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/v2/index.html b/v2/index.html
index 8ba2710..da78462 100644
--- a/v2/index.html
+++ b/v2/index.html
@@ -72,7 +72,17 @@
       <section class="pokemon-list">
         <div class="container">
           <div class="list-wrapper">
-            <img data-src-low="${pokemon.image_url_low}" data-src="${pokemon.image_url}" alt="${pokemon.name}" />
+            <div class="list-item">
+              <div class="number-wrap">
+                <p class="caption-fonts">#${pokemon.id}</p>
+              </div>
+              <div class="img-wrap">
+                <img data-src-low="${pokemon.image_url_low}" data-src="${pokemon.image_url}" alt="${pokemon.name}" />
+              </div>
+              <div class="name-wrap">
+                <p class="body3-fonts">${pokemon.name}</p>
+              </div>
+            </div>
           </div>
         </div>
         <div id="not-found-message">Pokemon not found</div>
diff --git a/v2/pokemon.js b/v2/pokemon.js
index d108d96..dfc35b1 100644
--- a/v2/pokemon.js
+++ b/v2/pokemon.js
@@ -78,7 +78,7 @@ function displayPokemons(pokemons) {
             <img data-src-low="${pokemon.image_url_low}" data-src="${pokemon.image_url}" alt="${pokemon.name}" />
         </div>
         <div class="name-wrap">
-            <p class="body3-fonts">#${pokemon.name}</p>
+            <p class="body3-fonts">${pokemon.name}</p>
         </div>
     `;
 
@@ -109,7 +109,7 @@ function lazyLoadImages() {
   let observer = new IntersectionObserver((entries, self) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
-        preloadImage(entry.target);
+        preloadLowResImage(entry.target);
         self.unobserve(entry.target);
       }
     });
@@ -120,19 +120,28 @@ function lazyLoadImages() {
   });
 }
 
-function preloadImage(img) {
+function preloadLowResImage(img) {
   const srcLow = img.getAttribute('data-src-low');
-  const src = img.getAttribute('data-src');
-  if (!srcLow || !src) {
+  if (!srcLow) {
     return;
   }
   console.log("Preloading low-resolution image:", srcLow);
   img.src = srcLow;
+  preloadHighResImage(img);
+}
+
+function preloadHighResImage(img) {
+  const src = img.getAttribute('data-src');
+  if (!src) {
+    return;
+  }
   const highResImg = new Image();
   highResImg.src = src;
   highResImg.onload = () => {
     console.log("Preloading high-resolution image:", src);
-    img.src = src;
+    setTimeout(() => {
+      img.src = src;
+    }, 2000); // Wait for 2 seconds before switching to high-resolution image
   };
 }