Heavily improved image loader

This commit is contained in:
Eduard Urbach 2018-03-20 23:58:37 +01:00
parent 6e603597ef
commit 5b2e22bbfc
3 changed files with 30 additions and 12 deletions

View File

@ -9,8 +9,9 @@ export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
for(let element of findAll("anime-grid-image")) { for(let element of findAll("anime-grid-image")) {
let img = element as HTMLImageElement let img = element as HTMLImageElement
img.src = "" img.src = arn.emptyPixel()
img.classList.remove("element-found") img.classList.remove("element-found")
img.classList.remove("element-color-preview")
} }
arn.diff(`/explore/anime/${year.value}/${status.value}/${type.value}`) arn.diff(`/explore/anime/${year.value}/${status.value}/${type.value}`)

View File

@ -537,14 +537,20 @@ export class AnimeNotifier {
} }
} }
emptyPixel() {
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
}
lazyLoadImage(element: HTMLImageElement) { lazyLoadImage(element: HTMLImageElement) {
// Once the image becomes visible, load it
element["became visible"] = () => {
// Show average color
if(element.dataset.color) { if(element.dataset.color) {
element.src = this.emptyPixel()
element.style.backgroundColor = element.dataset.color element.style.backgroundColor = element.dataset.color
this.elementColorPreview.queue(element) this.elementColorPreview.queue(element)
} }
// Once the image becomes visible, load it
element["became visible"] = () => {
let dataSrc = element.dataset.src let dataSrc = element.dataset.src
let dotPos = dataSrc.lastIndexOf(".") let dotPos = dataSrc.lastIndexOf(".")
let base = dataSrc.substring(0, dotPos) let base = dataSrc.substring(0, dotPos)
@ -568,10 +574,19 @@ export class AnimeNotifier {
base += "@2" 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) { if(element.naturalWidth === 0) {
element.onload = () => { element.onload = () => {
if(element.src.startsWith("data:")) {
return
}
this.elementFound.queue(element) this.elementFound.queue(element)
} }

View File

@ -1,21 +1,23 @@
mixin image-appear
animation color-preview 400ms forwards
.lazy .lazy
visibility hidden visibility hidden
opacity 0 opacity 0
// Hide the alt text that is shown while the image is loading
text-indent -500px
.element-color-preview .element-color-preview
visibility visible visibility visible
animation color-preview 1000ms forwards image-appear
animation color-preview animation color-preview
0%
opacity 0
100% 100%
opacity 1 opacity 1
.element-found .element-found
visibility visible visibility visible
opacity 1 image-appear
.element-not-found .element-not-found
visibility hidden visibility hidden