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

rewrite VideoScrollImage.vue to be more vue-like, return visibility: hidden

Browse source 
https://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
This commit is contained in:
Tomáš Mládek 2021-01-16 18:30:04 +01:00
parent e77106fa1f
commit 826ec2d9f0
1 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
app/src/components/VideoScrollImage.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<img ref="img" :src="currentSrc" class="video-scroll-image"/> <img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -17,27 +17,34 @@ export default defineComponent({
required: true required: true
} }
}, },
data() {
return {
currentSrc: undefined as undefined | string,
displayed: false,
loaded: false,
};
},
watch: { watch: {
visible() { visible() {
if (!this.img || !this.visible) { if (!this.img) {
return; return;
} }
console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`); if (this.visible && !this.loaded) {
this.currentSrc = this.definition.fullres; console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
const grayTimeout = setTimeout(() => { this.currentSrc = this.definition.fullres;
this.img!.classList.add("visible"); setTimeout(() => {
this.img!.style.background = "grey"; this.displayed = true;
}, 3000); }, 3000);
this.img.onload = () => { this.img.onload = () => {
clearTimeout(grayTimeout); this.displayed = true;
this.img!.classList.add("visible"); this.loaded = true;
this.img!.style.background = "none"; // if (this.isHorizontal) {
// if (this.isHorizontal) { // this.img!.style.height = "auto";
// this.img!.style.height = "auto"; // } else {
// } else { // this.img!.style.width = "auto";
// this.img!.style.width = "auto"; // }
// } };
}; }
} }
}, },
setup(props) { setup(props) {
@ -62,11 +69,21 @@ export interface VideoScrollImageDef {
.video-scroll-image { .video-scroll-image {
position: absolute; position: absolute;
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity .5s; transition: opacity .5s;
} }
.video-scroll-image.visible { .video-scroll-image.visible {
visibility: visible !important;
}
.video-scroll-image.loaded {
background: transparent !important;
}
.video-scroll-image.displayed {
background: gray;
opacity: 1 !important; opacity: 1 !important;
} }
</style> </style>