web/notify.moe
Code Issues Pull Requests Activity

Improved image loading

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-20 22:39:21 +01:00
parent 858aec9719
commit 35f694bcda
18 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mixins/AnimeGrid.pixy
View File

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

2
mixins/AnimeList.pixy
View File

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

2
mixins/SoundTrack.pixy
View File

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

4
pages/anime/anime.pixy
View File

@ -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 != ""

2
pages/calendar/calendar.pixy
View File

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

2
pages/character/character.pixy
View File

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

2
pages/company/company.pixy
View File

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

2
pages/compare/animelist.pixy
View File

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

2
pages/editanime/images.pixy
View File

@ -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")
img#anime-image-input-preview.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt="Anime image")

2
pages/editor/mal.pixy
View File

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

2
pages/episode/episode.pixy
View File

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

2
pages/profile/profile.pixy
View File

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

2
pages/quote/quote.pixy
View File

@ -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))
img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))

2
pages/search/search.pixy
View File

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

2
pages/soundtrack/soundtrack.pixy
View File

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

4
scripts/AnimeNotifier.ts
View File

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

3
styles/base.scarlet
View File

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

12
styles/images.scarlet
View File

@ -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
opacity 0