cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-16 02:18:50 -07:00
Code Issues Packages Projects Releases Wiki Activity

[WEB] Load thumbnail with native source property for faster load time (#378)

Browse Source
This commit is contained in:
Alex 2022-07-26 15:13:08 -05:00 committed by GitHub
parent e4c4b53fcd
commit 2336a6159c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app.css
View File

@ -44,6 +44,10 @@ body {
color: #5f6368; color: #5f6368;
} }
input:focus-visible {
outline-offset: 0px !important;
outline: none !important;
}
@layer utilities { @layer utilities {
.immich-form-input { .immich-form-input {
@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm; @apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm;

12
web/src/lib/components/shared-components/immich-thumbnail.svelte
View File

@ -246,25 +246,15 @@
<!-- Thumbnail --> <!-- Thumbnail -->
{#if intersecting} {#if intersecting}
{#await loadImageData()}
<div
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center `}
>
...
</div>
{:then imageData}
<img <img
style:width={`${thumbnailSize}px`} style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`} style:height={`${thumbnailSize}px`}
in:fade={{ duration: 250 }} in:fade={{ duration: 250 }}
src={imageData} src={`/api/asset/thumbnail/${asset.id}?format=${format}`}
alt={asset.id} alt={asset.id}
class={`object-cover ${getSize()} transition-all duration-100 z-0 ${getThumbnailBorderStyle()}`} class={`object-cover ${getSize()} transition-all duration-100 z-0 ${getThumbnailBorderStyle()}`}
loading="lazy" loading="lazy"
/> />
{/await}
{/if} {/if}
{#if mouseOver && asset.type === AssetTypeEnum.Video} {#if mouseOver && asset.type === AssetTypeEnum.Video}