thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity

do not display images out of viewport

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-10 00:00:42 +01:00
parent 5732daf32e
commit b2f2420df9
1 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/src/components/VideoScroll.vue
View file

@ -36,13 +36,18 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
const observer = new IntersectionObserver((entries, observer) => { const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) {
const element = entry.target as HTMLImageElement; const element = entry.target as HTMLImageElement;
if (entry.isIntersecting) {
element.classList.add("visible");
if (!element.src) {
element.src = element.dataset.src!; element.src = element.dataset.src!;
element.onload = () => { element.onload = () => {
element.classList.add("visible"); element.classList.add("loaded");
}; };
} }
} else {
element.classList.remove("visible");
}
}); });
}, {rootMargin: "100px"}); }, {rootMargin: "100px"});
Array.from((root.value as Element).children).forEach((el) => { Array.from((root.value as Element).children).forEach((el) => {
@ -90,9 +95,14 @@ function getMeta(url: string): Promise<HTMLImageElement> {
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
opacity: 0; opacity: 0;
transition: opacity .5s; transition: opacity .5s;
visibility: hidden;
}
.loaded {
opacity: 1 !important;
} }
.visible { .visible {
opacity: 1 !important; visibility: visible !important;
} }
</style> </style>