alvin/pokedex
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/pokedex.git synced 2026-03-06 11:07:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Pokémon display structure and improve image preloading logic

Browse Source
This commit is contained in:
vista-man
2025-03-25 17:53:37 +01:00
parent 730519bc19
commit 4ad8093682
2 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
v2/index.html
View File

@@ -72,7 +72,17 @@
<section class="pokemon-list"> <section class="pokemon-list">
<div class="container"> <div class="container">
<div class="list-wrapper"> <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> </div>
<div id="not-found-message">Pokemon not found</div> <div id="not-found-message">Pokemon not found</div>

21
v2/pokemon.js
View File

@@ -78,7 +78,7 @@ function displayPokemons(pokemons) {
<img data-src-low="${pokemon.image_url_low}" data-src="${pokemon.image_url}" alt="${pokemon.name}" /> <img data-src-low="${pokemon.image_url_low}" data-src="${pokemon.image_url}" alt="${pokemon.name}" />
</div> </div>
<div class="name-wrap"> <div class="name-wrap">
<p class="body3-fonts">#${pokemon.name}</p> <p class="body3-fonts">${pokemon.name}</p>
</div> </div>
`; `;
@@ -109,7 +109,7 @@ function lazyLoadImages() {
let observer = new IntersectionObserver((entries, self) => { let observer = new IntersectionObserver((entries, self) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
preloadImage(entry.target); preloadLowResImage(entry.target);
self.unobserve(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 srcLow = img.getAttribute('data-src-low');
const src = img.getAttribute('data-src'); if (!srcLow) {
if (!srcLow || !src) {
return; return;
} }
console.log("Preloading low-resolution image:", srcLow); console.log("Preloading low-resolution image:", srcLow);
img.src = srcLow; img.src = srcLow;
preloadHighResImage(img);
}
function preloadHighResImage(img) {
const src = img.getAttribute('data-src');
if (!src) {
return;
}
const highResImg = new Image(); const highResImg = new Image();
highResImg.src = src; highResImg.src = src;
highResImg.onload = () => { highResImg.onload = () => {
console.log("Preloading high-resolution image:", src); 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
}; };
} }