From a62e1c89ff459e022157e408cd0e54a2592e2577 Mon Sep 17 00:00:00 2001 From: luimu64 Date: Mon, 17 Jun 2024 01:12:21 +0300 Subject: [PATCH 1/4] image lazyloading kinda works --- .../components/kurosearch/media-image/Image.svelte | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/lib/components/kurosearch/media-image/Image.svelte b/src/lib/components/kurosearch/media-image/Image.svelte index 1f54070..b46e061 100644 --- a/src/lib/components/kurosearch/media-image/Image.svelte +++ b/src/lib/components/kurosearch/media-image/Image.svelte @@ -4,6 +4,7 @@ import { postobserve } from '$lib/logic/use/postobserve'; import highResolutionEnabled from '$lib/store/high-resolution-enabled'; import { calculateAspectRatio, calculateAspectRatioCss } from '../post/ratio'; + import { onMount } from 'svelte'; export let post: kurosearch.Post; @@ -12,7 +13,17 @@ let open: boolean; - $: src = highResolutionEnabled ? post.file_url : post.sample_url; + onMount(() => { + console.log(post.id, 'started loading full'); + const fullImgElem: HTMLImageElement = new Image(); + fullImgElem.src = highResolutionEnabled ? post.file_url : post.sample_url; + fullImgElem.onload = () => { + src = fullImgElem.currentSrc; + console.log(post.id, 'replaced full'); + }; + }); + + $: src = post.preview_url; @@ -24,6 +35,7 @@ {post.id.toString()} Date: Mon, 17 Jun 2024 16:40:11 +0300 Subject: [PATCH 2/4] lazy loading for images done (except weird empty space in thet low res images) --- .../kurosearch/media-image/Image.svelte | 17 ++------------ src/lib/logic/post-observer.ts | 23 +++++++++++++------ 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/lib/components/kurosearch/media-image/Image.svelte b/src/lib/components/kurosearch/media-image/Image.svelte index b46e061..ad202ad 100644 --- a/src/lib/components/kurosearch/media-image/Image.svelte +++ b/src/lib/components/kurosearch/media-image/Image.svelte @@ -4,7 +4,6 @@ import { postobserve } from '$lib/logic/use/postobserve'; import highResolutionEnabled from '$lib/store/high-resolution-enabled'; import { calculateAspectRatio, calculateAspectRatioCss } from '../post/ratio'; - import { onMount } from 'svelte'; export let post: kurosearch.Post; @@ -12,18 +11,6 @@ let expandable = ratio < 0.33; let open: boolean; - - onMount(() => { - console.log(post.id, 'started loading full'); - const fullImgElem: HTMLImageElement = new Image(); - fullImgElem.src = highResolutionEnabled ? post.file_url : post.sample_url; - fullImgElem.onload = () => { - src = fullImgElem.currentSrc; - console.log(post.id, 'replaced full'); - }; - }); - - $: src = post.preview_url; @@ -35,8 +22,8 @@ {post.id.toString()} { - for (const entry of entries) { - const newSrc = entry.isIntersecting ? entry.target.getAttribute('data-src') ?? '' : ''; - entry?.target?.setAttribute('src', newSrc); + (entries) => { + for (const entry of entries) { + const lowSrc = entry.target.getAttribute('data-src-lowres') ?? ''; + const highSrc = entry.target.getAttribute('data-src-hires') ?? ''; + + if (entry.isIntersecting) { + entry?.target?.setAttribute('src', lowSrc); + const fullImage = new Image(); + fullImage.src = highSrc; + fullImage.onload = () => { + entry.target.setAttribute('src', fullImage.src); + } } - }, - { rootMargin } - ) + } + }, + { rootMargin } + ) : null; From 635a3d391b5150c1bb24b37f203d3e9c08a1dffd Mon Sep 17 00:00:00 2001 From: luimu64 Date: Mon, 17 Jun 2024 17:21:05 +0300 Subject: [PATCH 3/4] gifs fixed for the new system --- src/lib/components/kurosearch/media-gif/Gif.svelte | 2 +- src/lib/logic/post-observer.ts | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/lib/components/kurosearch/media-gif/Gif.svelte b/src/lib/components/kurosearch/media-gif/Gif.svelte index 079f139..1abfc04 100644 --- a/src/lib/components/kurosearch/media-gif/Gif.svelte +++ b/src/lib/components/kurosearch/media-gif/Gif.svelte @@ -29,7 +29,7 @@ {post.id.toString()} { for (const entry of entries) { - const lowSrc = entry.target.getAttribute('data-src-lowres') ?? ''; - const highSrc = entry.target.getAttribute('data-src-hires') ?? ''; - + //check if post is visible if (entry.isIntersecting) { + //fetch source urls saved in the image data attributes + const lowSrc = entry.target.getAttribute('data-src-lowres') ?? ''; + const highSrc = entry.target.getAttribute('data-src-hires') ?? ''; + + //set post.preview_url to image sources or sources.static to gifs entry?.target?.setAttribute('src', lowSrc); + + //data-src-hires only exists on static images so skip the rest of the function on gifs + if (highSrc === '') return; + //create new non-visible image and swap the sources once loaded const fullImage = new Image(); fullImage.src = highSrc; fullImage.onload = () => { From ebe59a1cfcf3cdab195deb70af6ee08300fdcde4 Mon Sep 17 00:00:00 2001 From: luimu64 Date: Mon, 17 Jun 2024 17:52:56 +0300 Subject: [PATCH 4/4] fixed images getting reset after scrolling back up --- src/lib/logic/post-observer.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/logic/post-observer.ts b/src/lib/logic/post-observer.ts index 92ea8d3..332fd48 100644 --- a/src/lib/logic/post-observer.ts +++ b/src/lib/logic/post-observer.ts @@ -12,6 +12,9 @@ export const postObserver = browser const lowSrc = entry.target.getAttribute('data-src-lowres') ?? ''; const highSrc = entry.target.getAttribute('data-src-hires') ?? ''; + //when the image comes in and goes out of the viewport this prevents reloading the already loaded sources + if (entry.target.getAttribute('src') === highSrc) return; + //set post.preview_url to image sources or sources.static to gifs entry?.target?.setAttribute('src', lowSrc);