web/notify.moe
Code Issues Pull Requests Activity

Heavily improved image loader

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

27
scripts/AnimeNotifier.ts
View File

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