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

Add low-resolution image support for Pokémon data retrieval

Browse Source
This commit is contained in:
vista-man
2025-03-25 16:47:58 +01:00
parent 92910ea839
commit 2fa31886a7
2024 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
v2/pokemon.js
View File

@@ -75,7 +75,7 @@ function displayPokemons(pokemons) {
<p class="caption-fonts">#${pokemon.id}</p>
</div>
<div class="img-wrap">
<img 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 class="name-wrap">
<p class="body3-fonts">#${pokemon.name}</p>
@@ -121,12 +121,19 @@ function lazyLoadImages() {
}
function preloadImage(img) {
const srcLow = img.getAttribute('data-src-low');
const src = img.getAttribute('data-src');
if (!src) {
if (!srcLow || !src) {
return;
}
console.log("Preloading image:", src);
img.src = src;
console.log("Preloading low-resolution image:", srcLow);
img.src = srcLow;
const highResImg = new Image();
highResImg.src = src;
highResImg.onload = () => {
console.log("Preloading high-resolution image:", src);
img.src = src;
};
}
searchInput.addEventListener("keyup", handleSearch);