From 35f694bcda6e7ec458ac005ba40aa0eeea8ffe94 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Tue, 20 Mar 2018 22:39:21 +0100 Subject: [PATCH] Improved image loading --- mixins/AnimeGrid.pixy | 2 +- mixins/AnimeList.pixy | 2 +- mixins/SoundTrack.pixy | 2 +- pages/anime/anime.pixy | 4 ++-- pages/calendar/calendar.pixy | 2 +- pages/character/character.pixy | 2 +- pages/company/company.pixy | 2 +- pages/compare/animelist.pixy | 2 +- pages/editanime/images.pixy | 2 +- pages/editor/mal.pixy | 2 +- pages/episode/episode.pixy | 2 +- pages/profile/profile.pixy | 2 +- pages/quote/quote.pixy | 2 +- pages/search/search.pixy | 2 +- pages/soundtrack/soundtrack.pixy | 2 +- scripts/AnimeNotifier.ts | 4 +++- styles/base.scarlet | 3 +++ styles/images.scarlet | 12 ++++++++++-- 18 files changed, 32 insertions(+), 19 deletions(-) diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index f9939b51..1d2c5231 100644 --- a/mixins/AnimeGrid.pixy +++ b/mixins/AnimeGrid.pixy @@ -3,7 +3,7 @@ component AnimeGrid(animeList []*arn.Anime, user *arn.User) each anime in animeList .anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID))) a.ajax(href="/anime/" + toString(anime.ID)) - img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.Image.AverageColor, alt=anime.Title.Romaji) + img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji) .anime-grid-title .anime-grid-title-text= anime.Title.ByUser(user) diff --git a/mixins/AnimeList.pixy b/mixins/AnimeList.pixy index e9cd796e..da1a7bbb 100644 --- a/mixins/AnimeList.pixy +++ b/mixins/AnimeList.pixy @@ -11,7 +11,7 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") .anime-list-item-image-container a.anime-list-item-image-link.ajax(href=item.Anime().Link()) - img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", alt=item.Anime().Title.ByUser(user)) + img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) .anime-list-item-name a.ajax(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user) diff --git a/mixins/SoundTrack.pixy b/mixins/SoundTrack.pixy index aeaf40cb..6573c866 100644 --- a/mixins/SoundTrack.pixy +++ b/mixins/SoundTrack.pixy @@ -7,7 +7,7 @@ component SoundTrackContent(track *arn.SoundTrack) .soundtrack-content if track.MainAnime() != nil a.soundtrack-anime-link.ajax(href="/anime/" + track.MainAnime().ID) - img.soundtrack-anime-image.lazy(data-src=track.MainAnime().ImageLink("medium"), data-webp="true", alt=track.MainAnime().Title.Canonical, title=track.MainAnime().Title.Canonical) + img.soundtrack-anime-image.lazy(data-src=track.MainAnime().ImageLink("medium"), data-webp="true", data-color=track.MainAnime().AverageColor(), alt=track.MainAnime().Title.Canonical, title=track.MainAnime().Title.Canonical) SoundTrackMedia(track) diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 0058fc6c..260990c9 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -8,7 +8,7 @@ component Anime(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.Sou component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, episodes []*arn.AnimeEpisode, user *arn.User) .anime-header(data-id=anime.ID) a.anime-image-container.mountable(href=anime.ImageLink("original"), target="_blank") - img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.Image.AverageColor, alt=anime.Title.ByUser(user)) + img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) .space @@ -149,7 +149,7 @@ component AnimeRelations(anime *arn.Anime, user *arn.User) .anime-relations each relation in anime.Relations().Items a.anime-relation.mountable.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user), data-mountable-type="relation") - img.anime-relation-image.lazy(data-src=relation.Anime().ImageLink("small"), data-webp="true", alt=relation.Anime().Title.ByUser(user)) + img.anime-relation-image.lazy(data-src=relation.Anime().ImageLink("small"), data-webp="true", data-color=relation.Anime().AverageColor(), alt=relation.Anime().Title.ByUser(user)) .anime-relation-type= relation.HumanReadableType() .anime-relation-year if relation.Anime().StartDate != "" diff --git a/pages/calendar/calendar.pixy b/pages/calendar/calendar.pixy index f79e3221..8acf7afe 100644 --- a/pages/calendar/calendar.pixy +++ b/pages/calendar/calendar.pixy @@ -12,7 +12,7 @@ component Calendar(days []*utils.CalendarDay, user *arn.User) .calendar-entries each entry in day.Entries a.calendar-entry.mountable.ajax(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added) - img.calendar-entry-image.lazy(data-src=entry.Anime.ImageLink("small"), data-webp="true", alt=entry.Anime.Title.ByUser(user)) + img.calendar-entry-image.lazy(data-src=entry.Anime.ImageLink("small"), data-webp="true", data-color=entry.Anime.AverageColor(), alt=entry.Anime.Title.ByUser(user)) .calendar-entry-info .calendar-entry-title= entry.Anime.Title.ByUser(user) .calendar-entry-time-and-episode diff --git a/pages/character/character.pixy b/pages/character/character.pixy index 74417de6..a271a304 100644 --- a/pages/character/character.pixy +++ b/pages/character/character.pixy @@ -14,7 +14,7 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime .character-anime each anime in characterAnime a.character-anime-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", alt=anime.Title.ByUser(user)) + img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) if len(quotes) >0 h3 Quotes diff --git a/pages/company/company.pixy b/pages/company/company.pixy index be853120..5b12847d 100644 --- a/pages/company/company.pixy +++ b/pages/company/company.pixy @@ -43,7 +43,7 @@ component CompanyAnime(label string, animes []*arn.Anime, user *arn.User) .company-anime.mountable each anime in animes a.company-anime-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", alt=anime.Title.ByUser(user)) + img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) component CompanyTabs(company *arn.Company, user *arn.User) .tabs diff --git a/pages/compare/animelist.pixy b/pages/compare/animelist.pixy index 16577067..dffbfef0 100644 --- a/pages/compare/animelist.pixy +++ b/pages/compare/animelist.pixy @@ -20,7 +20,7 @@ component CompareAnimeList(a *arn.User, b *arn.User, countA int, countB int, com tr.anime-list-item.mountable td.anime-list-item-image-container a.ajax(href=comparison.Anime.Link()) - img.anime-list-item-image.lazy(data-src=comparison.Anime.ImageLink("small"), data-webp="true", alt=comparison.Anime.Title.ByUser(user)) + img.anime-list-item-image.lazy(data-src=comparison.Anime.ImageLink("small"), data-webp="true", data-color=comparison.Anime.AverageColor(), alt=comparison.Anime.Title.ByUser(user)) td.anime-list-item-name a.ajax(href=comparison.Anime.Link())= comparison.Anime.Title.ByUser(user) diff --git a/pages/editanime/images.pixy b/pages/editanime/images.pixy index 7ce43f08..d479bdfe 100644 --- a/pages/editanime/images.pixy +++ b/pages/editanime/images.pixy @@ -12,4 +12,4 @@ component EditAnimeImages(anime *arn.Anime) InputImage("anime-image-input", "File", "/api/upload/anime/" + anime.ID + "/image") .anime-image-container - img#anime-image-input-preview.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", alt="Anime image") \ No newline at end of file + img#anime-image-input-preview.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt="Anime image") \ No newline at end of file diff --git a/pages/editor/mal.pixy b/pages/editor/mal.pixy index 98d8555d..9d5d3363 100644 --- a/pages/editor/mal.pixy +++ b/pages/editor/mal.pixy @@ -8,7 +8,7 @@ component CompareMAL(comparisons []*utils.MALComparison, year string, status str .data-comparison.mountable .data-comparison-header a.data-comparison-image-container(href=comparison.Anime.Link(), target="_blank") - img.data-comparison-image.lazy(data-src=comparison.Anime.ImageLink("small"), data-webp="true", alt=comparison.Anime.Title.ByUser(user)) + img.data-comparison-image.lazy(data-src=comparison.Anime.ImageLink("small"), data-webp="true", data-color=comparison.Anime.AverageColor(), alt=comparison.Anime.Title.ByUser(user)) .data-comparison-title a(href=comparison.Anime.Link(), target="_blank")= comparison.Anime.Title.Canonical diff --git a/pages/episode/episode.pixy b/pages/episode/episode.pixy index c8813d08..e8695163 100644 --- a/pages/episode/episode.pixy +++ b/pages/episode/episode.pixy @@ -3,7 +3,7 @@ component AnimeEpisode(anime *arn.Anime, episode *arn.AnimeEpisode, user *arn.Us .episode-view-image-container a.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", alt=anime.Title.ByUser(user)) + img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) h3.episode-view-number= "Episode " + strconv.Itoa(episode.Number) diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 726f6d62..e1e44311 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -8,7 +8,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, each item in animeList.Items if item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusCompleted a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.ByUser(user) + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")") - img.profile-watching-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().Image.AverageColor, alt=item.Anime().Title.ByUser(user)) + img.profile-watching-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) .footer .buttons diff --git a/pages/quote/quote.pixy b/pages/quote/quote.pixy index 313b4f46..899659ee 100644 --- a/pages/quote/quote.pixy +++ b/pages/quote/quote.pixy @@ -58,4 +58,4 @@ component QuoteTabs(quote *arn.Quote, user *arn.User) component QuoteAnime(anime *arn.Anime, user *arn.User) a.quote-anime-list-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", alt=anime.Title.ByUser(user)) \ No newline at end of file + img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) \ No newline at end of file diff --git a/pages/search/search.pixy b/pages/search/search.pixy index 6f1ccc4d..df1ebd13 100644 --- a/pages/search/search.pixy +++ b/pages/search/search.pixy @@ -65,7 +65,7 @@ component AnimeSearchResults(animes []*arn.Anime) .profile-watching-list.anime-search each anime in animes a.profile-watching-list-item.mountable.ajax(href=anime.Link(), title=anime.Title.Canonical, data-mountable-type="anime") - img.anime-cover-image.anime-search-result.lazy(data-src=anime.ImageLink("small"), data-webp="true", alt=anime.Title.Canonical) + img.anime-cover-image.anime-search-result.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Canonical) component CharacterSearchResults(characters []*arn.Character) if len(characters) == 0 diff --git a/pages/soundtrack/soundtrack.pixy b/pages/soundtrack/soundtrack.pixy index 86eb94eb..8355bf90 100644 --- a/pages/soundtrack/soundtrack.pixy +++ b/pages/soundtrack/soundtrack.pixy @@ -26,7 +26,7 @@ component SoundTrackPage(track *arn.SoundTrack, user *arn.User) .soundtrack-anime-list each anime in track.Anime() a.soundtrack-anime-list-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.soundtrack-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", alt=anime.Title.ByUser(user)) + img.soundtrack-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) if len(track.Links) > 0 .widget.mountable diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index c8f75164..321641f0 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -38,6 +38,7 @@ export class AnimeNotifier { elementFound: MutationQueue elementNotFound: MutationQueue + elementColorPreview: MutationQueue unmount: MutationQueue constructor(app: Application) { @@ -48,6 +49,7 @@ export class AnimeNotifier { this.elementFound = new MutationQueue(elem => elem.classList.add("element-found")) this.elementNotFound = new MutationQueue(elem => elem.classList.add("element-not-found")) + this.elementColorPreview = new MutationQueue(elem => elem.classList.add("element-color-preview")) this.unmount = new MutationQueue(elem => elem.classList.remove("mounted")) // These classes will never be removed on DOM diffs @@ -538,7 +540,7 @@ export class AnimeNotifier { lazyLoadImage(element: HTMLImageElement) { if(element.dataset.color) { element.style.backgroundColor = element.dataset.color - this.elementFound.queue(element) + this.elementColorPreview.queue(element) } // Once the image becomes visible, load it diff --git a/styles/base.scarlet b/styles/base.scarlet index 1b765a80..9535bb3c 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -38,6 +38,9 @@ a img backface-visibility hidden + // Hide the alt text that is shown while the image is loading + // text-indent -9999px + .hidden display none !important diff --git a/styles/images.scarlet b/styles/images.scarlet index 8bc0fc41..39934fe1 100644 --- a/styles/images.scarlet +++ b/styles/images.scarlet @@ -2,10 +2,18 @@ visibility hidden opacity 0 +.element-color-preview + visibility visible + animation color-preview 1000ms forwards + +animation color-preview + 100% + opacity 1 + .element-found visibility visible - opacity 1 !important + opacity 1 .element-not-found visibility hidden - opacity 0 !important \ No newline at end of file + opacity 0 \ No newline at end of file