do not display images out of viewport

This commit is contained in:
Tomáš Mládek 2021-01-10 00:00:42 +01:00
parent 5732daf32e
commit b2f2420df9

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>