Refactor Pokémon display structure and improve image preloading logic

v2/index.html

@@ -72,8 +72,18 @@
       <section class="pokemon-list">
         <div class="container">
           <div class="list-wrapper">
+            <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>
       </section>

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);
+    setTimeout(() => {
       img.src = src;
+    }, 2000); // Wait for 2 seconds before switching to high-resolution image
   };
 }