smoothly show loading images

This commit is contained in:
Tomáš Mládek 2021-01-09 23:56:14 +01:00
parent 6e07542ace
commit 5732daf32e

View file

@ -39,6 +39,9 @@ export default defineComponent({
if (entry.isIntersecting) {
const element = entry.target as HTMLImageElement;
element.src = element.dataset.src!;
element.onload = () => {
element.classList.add("visible");
};
}
});
}, {rootMargin: "100px"});
@ -85,5 +88,11 @@ function getMeta(url: string): Promise<HTMLImageElement> {
.video-scroll img {
position: absolute;
image-rendering: optimizeSpeed;
opacity: 0;
transition: opacity .5s;
}
.visible {
opacity: 1 !important;
}
</style>