From d6bfef40ccbca7cffc0f75df33b8a7eae88dc5e4 Mon Sep 17 00:00:00 2001 From: Azri Kahar <42867097+azrikahar@users.noreply.github.com> Date: Wed, 17 Aug 2022 23:44:18 +0800 Subject: [PATCH] Fix v-image's intersection observer sometimes preventing image load (#15082) * Fix v-image's intersection observer * check the last entry instead * clean up Co-authored-by: rijkvanzanten --- app/src/components/v-image.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/src/components/v-image.vue b/app/src/components/v-image.vue index 082c4f6f57..4dc90bbb7f 100644 --- a/app/src/components/v-image.vue +++ b/app/src/components/v-image.vue @@ -25,15 +25,17 @@ const srcData = ref(emptyPixel); let loaded = false; -const observer = new IntersectionObserver(async (entries) => { +const observer = new IntersectionObserver((entries) => { if (entries.length === 0) return; - inView.value = entries[0].isIntersecting; - if (entries[0].isIntersecting && !loaded && props.src) { + const isIntersecting = entries.at(-1)!.isIntersecting; + + inView.value = isIntersecting; + + if (isIntersecting && !loaded && props.src) { loadImage(); } }); - watch( () => props.src, () => {