Heavily improved image loader

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}`)

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)
 				}
 

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