This commit is contained in:
@ -19,7 +19,6 @@
|
||||
_img.addEventListener("load", () => {
|
||||
img.classList.remove("thumb-loading");
|
||||
_img.style.opacity = "1";
|
||||
console.log("loaded");
|
||||
});
|
||||
if (_img?.alt) altText = _img.alt;
|
||||
else altText = "";
|
||||
@ -128,6 +127,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.images :global(.thumb-loading)::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.images :global(.active) {
|
||||
position: relative;
|
||||
display: block !important;
|
||||
|
@ -1,55 +0,0 @@
|
||||
<script>
|
||||
import { thumbHashToRGBA, rgbaToDataURL } from "thumbhash";
|
||||
|
||||
function show(img: HTMLImageElement) {
|
||||
img.style.opacity = "1";
|
||||
img.style.filter = "blur(0px)";
|
||||
setTimeout(() => {
|
||||
if (img.parentNode) {
|
||||
(img.parentNode as HTMLPictureElement).style.background = "";
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
|
||||
console.log("Thumbhash script loaded");
|
||||
|
||||
document.querySelectorAll("[data-thumbhash]").forEach((entry) => {
|
||||
const parent = entry?.parentNode as HTMLPictureElement;
|
||||
const img = entry as HTMLImageElement;
|
||||
|
||||
if (parent?.nodeName !== "PICTURE") return;
|
||||
|
||||
const hash = img.getAttribute("data-thumbhash");
|
||||
if (!hash) return;
|
||||
|
||||
// its only browser, why you have to be mad
|
||||
const decodedString = window.atob(hash);
|
||||
|
||||
// Create Uint8Array from decoded string
|
||||
const buffer = new Uint8Array(decodedString.length);
|
||||
for (let i = 0; i < decodedString.length; i++) {
|
||||
buffer[i] = decodedString.charCodeAt(i);
|
||||
}
|
||||
|
||||
const image = thumbHashToRGBA(buffer);
|
||||
const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
|
||||
|
||||
parent.style.background = `url(${dataURL})`;
|
||||
parent.style.backgroundSize = "cover";
|
||||
|
||||
if (img.complete) {
|
||||
return;
|
||||
}
|
||||
|
||||
img.style.opacity = "0";
|
||||
img.style.filter = "blur(5px)";
|
||||
img.style.transition = "opacity 0.6s ease, filter 0.8s ease";
|
||||
|
||||
const sources = parent.querySelectorAll("source");
|
||||
|
||||
img.onload = () => show(img);
|
||||
for (const source of sources) {
|
||||
source.addEventListener("load", () => show(img));
|
||||
}
|
||||
});
|
||||
</script>
|
Reference in New Issue
Block a user