mackuba.eu
Thread viewer for Bluesky
extracted avatar preloader
+19
-22
+3
-3
src/components/posts/PostHeader.svelte
+3
-3
src/components/posts/PostHeader.svelte
···
1
1
<script lang="ts">
2
2
import { getPostContext } from './PostComponent.svelte';
3
+
import { avatarPreloader } from '../../utils.js';
3
4
import { PostPresenter } from '../../utils/post_presenter.js';
4
5
import PostSubtreeLink from './PostSubtreeLink.svelte';
5
6
···
10
11
11
12
$effect(() => {
12
13
if (avatar) {
13
-
let av = avatar;
14
-
window.avatarPreloader.observe(av);
14
+
avatarPreloader.observe(avatar);
15
15
16
16
return () => {
17
-
window.avatarPreloader.unobserve(av);
17
+
avatar && avatarPreloader.unobserve(avatar);
18
18
}
19
19
}
20
20
});
-18
src/skythread.js
-18
src/skythread.js
···
26
26
27
27
28
28
function init() {
29
-
window.avatarPreloader = buildAvatarPreloader();
30
-
31
29
svelte.mount(AccountMenu, { target: $id('account_menu_wrap') });
32
30
33
31
for (let dialog of document.querySelectorAll('.dialog')) {
···
71
69
} else {
72
70
showSearch();
73
71
}
74
-
}
75
-
76
-
/** @returns {IntersectionObserver} */
77
-
78
-
function buildAvatarPreloader() {
79
-
return new IntersectionObserver((entries, observer) => {
80
-
for (const entry of entries) {
81
-
if (entry.isIntersecting) {
82
-
const img = entry.target;
83
-
img.removeAttribute('lazy');
84
-
observer.unobserve(img);
85
-
}
86
-
}
87
-
}, {
88
-
rootMargin: '1000px 0px'
89
-
});
90
72
}
91
73
92
74
function showSearch() {
-1
src/types.d.ts
-1
src/types.d.ts
···
9
9
declare var blueAPI: import("./api/bluesky_api.js").BlueskyAPI;
10
10
declare var appView: import("./api/bluesky_api.js").BlueskyAPI;
11
11
declare var api: import("./api/bluesky_api.js").BlueskyAPI;
12
-
declare var avatarPreloader: IntersectionObserver;
13
12
14
13
type json = Record<string, any>;
15
14
+1
src/utils.ts
+1
src/utils.ts
+15
src/utils/avatar_preloader.ts
+15
src/utils/avatar_preloader.ts
···
1
+
function buildAvatarPreloader(): IntersectionObserver {
2
+
return new IntersectionObserver((entries, observer) => {
3
+
for (const entry of entries) {
4
+
if (entry.isIntersecting) {
5
+
const img = entry.target;
6
+
img.removeAttribute('lazy');
7
+
observer.unobserve(img);
8
+
}
9
+
}
10
+
}, {
11
+
rootMargin: '1000px 0px'
12
+
});
13
+
}
14
+
15
+
export let avatarPreloader = buildAvatarPreloader();