diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index 1581023c..43537328 100644 --- a/mixins/AnimeGrid.pixy +++ b/mixins/AnimeGrid.pixy @@ -2,4 +2,4 @@ component AnimeGrid(animeList []*arn.Anime) .anime-grid each anime in animeList a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID)) - img.anime-grid-image(src=anime.Image.Small, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Rating.Overall) + ")") \ No newline at end of file + img.anime-grid-image.lazy(data-src=anime.Image.Small, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Rating.Overall) + ")") \ No newline at end of file diff --git a/mixins/Avatar.pixy b/mixins/Avatar.pixy index c95f96f4..b3f9a103 100644 --- a/mixins/Avatar.pixy +++ b/mixins/Avatar.pixy @@ -4,7 +4,7 @@ component Avatar(user *arn.User) component AvatarNoLink(user *arn.User) if user.HasAvatar() - img.user-image(src=user.SmallAvatar(), alt=user.Nick) + img.user-image.lazy(data-src=user.SmallAvatar(), alt=user.Nick) else SVGAvatar diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 2e9d344e..36c12226 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -57,7 +57,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, else each item in animeList.Items a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")") - img.anime-cover-image.profile-watching-list-item-image(src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical) + img.anime-cover-image.profile-watching-list-item-image.lazy(data-src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical) .profile-category.mountable h3 diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index e5678955..d705e594 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -87,39 +87,34 @@ export class AnimeNotifier { actions[actionName](this, element, e) }) + // Use "action assigned" flag instead of removing the class. + // This will make sure that DOM diffs which restore the class name + // will not assign the action multiple times to the same element. element["action assigned"] = true } } lazyLoadImages() { - for(let element of findAll("user-image")) { - this.lazyLoadImage(element as HTMLImageElement) - } - - for(let element of findAll("anime-cover-image")) { + for(let element of findAll("lazy")) { this.lazyLoadImage(element as HTMLImageElement) } } lazyLoadImage(img: HTMLImageElement) { - // Prevent browser from loading it instantly - img["original source"] = img.src - img.src = "" - // Once the image becomes visible, load it img["became visible"] = () => { - img.src = img["original source"] + img.src = img.dataset.src if(img.naturalWidth === 0) { img.onload = function() { - this.classList.add("user-image-found") + this.classList.add("image-found") } img.onerror = function() { - this.classList.add("user-image-not-found") + this.classList.add("image-not-found") } } else { - img.classList.add("user-image-found") + img.classList.add("image-found") } } diff --git a/styles/grid.scarlet b/styles/grid.scarlet index 6d304d72..caa8ae2b 100644 --- a/styles/grid.scarlet +++ b/styles/grid.scarlet @@ -32,6 +32,7 @@ mixin grid-image height 100% border-radius 3px object-fit cover + default-transition mixin grid-icon font-size 2.5rem diff --git a/styles/images.scarlet b/styles/images.scarlet new file mode 100644 index 00000000..bf3ea806 --- /dev/null +++ b/styles/images.scarlet @@ -0,0 +1,11 @@ +.lazy + visibility hidden + opacity 0 + +.image-found + visibility visible + opacity 1 !important + +.image-not-found + visibility hidden + opacity 0 !important \ No newline at end of file diff --git a/styles/user.scarlet b/styles/user.scarlet index 21a16f54..5a39867f 100644 --- a/styles/user.scarlet +++ b/styles/user.scarlet @@ -4,13 +4,6 @@ height avatar-size border-radius 100% object-fit cover - opacity 0 default-transition :hover - box-shadow outline-shadow-heavy - -.user-image-found - opacity 1 !important - -.user-image-not-found - opacity 0 !important \ No newline at end of file + box-shadow outline-shadow-heavy \ No newline at end of file