diff options
Diffstat (limited to 'src/lib/List')
| -rw-r--r-- | src/lib/List/CleanGrid.svelte | 7 | ||||
| -rw-r--r-- | src/lib/List/covers.css | 7 |
2 files changed, 12 insertions, 2 deletions
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte index ed4a9733..1e6f5a12 100644 --- a/src/lib/List/CleanGrid.svelte +++ b/src/lib/List/CleanGrid.svelte @@ -25,8 +25,9 @@ class="covers" style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`} > - {#each processedMedia as title} + {#each processedMedia as title, index} {@const progress = (title.mediaListEntry || { progress: 0 }).progress} + {@const isAboveFold = index < 6} {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress != title.episodes} <div class="cover-card" id={`${type}-${title.id}-${uniqueID}`}> @@ -59,6 +60,10 @@ classList={`cover${ title.isAdult && $settings.displayBlurAdultContent ? ' adult' : '' }`} + loading={isAboveFold ? 'eager' : 'lazy'} + fetchpriority={isAboveFold ? 'high' : undefined} + width={$settings.displayDataSaver ? 230 : 460} + height={$settings.displayDataSaver ? 325 : 650} /> </span> </a> diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css index c83b984e..0993a5c8 100644 --- a/src/lib/List/covers.css +++ b/src/lib/List/covers.css @@ -9,6 +9,10 @@ background-size: cover; background-position: center; border-radius: 8px; + aspect-ratio: 46 / 65; + width: 100%; + height: auto; + object-fit: cover; } .cover-title { @@ -58,11 +62,12 @@ } .cover-container { - /* overflow: hidden; */ display: flex; justify-content: center; align-items: center; border-radius: 8px; + aspect-ratio: 46 / 65; + overflow: hidden; } button { |