fix: image loading & syze

This commit is contained in:
Rico van Zelst
2023-11-07 19:52:45 +01:00
parent a4bdbe880c
commit 8751c6dd1a
2 changed files with 2 additions and 13 deletions

View File

@@ -3,14 +3,3 @@ import "flowbite";
import "./icons"; import "./icons";
import "./icons-brands"; import "./icons-brands";
import "./icons-duotone"; import "./icons-duotone";
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll(".transition-opacity");
images.forEach((image) => {
image.onload = function () {
image.style.filter = "blur(0)";
image.style.opacity = "1";
};
});
});

View File

@@ -20,8 +20,8 @@
<div <div
class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40"> class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
<img @if($key < 8) loading="eager" @else loading="lazy" @endif <img @if($key < 8) loading="eager" @else loading="lazy" @endif
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=400&output=webp&q=70" src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=380&output=webp&q=65"
class="object-cover w-full h-full transition-opacity filter blur-3 opacity-0" class="object-cover w-full h-full"
alt="{{ $champion->name }} Splash Art" alt="{{ $champion->name }} Splash Art"
/> />
</div> </div>