diff --git a/scripts/Actions/Explore.ts b/scripts/Actions/Explore.ts index 8147325f..3c4ebb5f 100644 --- a/scripts/Actions/Explore.ts +++ b/scripts/Actions/Explore.ts @@ -9,8 +9,9 @@ export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) { for(let element of findAll("anime-grid-image")) { let img = element as HTMLImageElement - img.src = "" + img.src = arn.emptyPixel() img.classList.remove("element-found") + img.classList.remove("element-color-preview") } arn.diff(`/explore/anime/${year.value}/${status.value}/${type.value}`) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 321641f0..3b7d239b 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -537,14 +537,20 @@ export class AnimeNotifier { } } - lazyLoadImage(element: HTMLImageElement) { - if(element.dataset.color) { - element.style.backgroundColor = element.dataset.color - this.elementColorPreview.queue(element) - } + emptyPixel() { + return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" + } + lazyLoadImage(element: HTMLImageElement) { // Once the image becomes visible, load it element["became visible"] = () => { + // Show average color + if(element.dataset.color) { + element.src = this.emptyPixel() + element.style.backgroundColor = element.dataset.color + this.elementColorPreview.queue(element) + } + let dataSrc = element.dataset.src let dotPos = dataSrc.lastIndexOf(".") let base = dataSrc.substring(0, dotPos) @@ -568,10 +574,19 @@ export class AnimeNotifier { base += "@2" } - element.src = base + extension + let finalSrc = base + extension + + if(element.src !== finalSrc && element.src !== "https:" + finalSrc) { + element.classList.remove("element-found") + element.src = finalSrc + } if(element.naturalWidth === 0) { element.onload = () => { + if(element.src.startsWith("data:")) { + return + } + this.elementFound.queue(element) } diff --git a/styles/images.scarlet b/styles/images.scarlet index 3412ba89..59ebbbd6 100644 --- a/styles/images.scarlet +++ b/styles/images.scarlet @@ -1,21 +1,23 @@ +mixin image-appear + animation color-preview 400ms forwards + .lazy visibility hidden opacity 0 - // Hide the alt text that is shown while the image is loading - text-indent -500px - .element-color-preview visibility visible - animation color-preview 1000ms forwards + image-appear animation color-preview + 0% + opacity 0 100% opacity 1 .element-found visibility visible - opacity 1 + image-appear .element-not-found visibility hidden