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

smoothly show loading images

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-09 23:56:14 +01:00
parent 6e07542ace
commit 5732daf32e
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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