73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
|
<template>
|
||
|
<img ref="img" :src="currentSrc" class="video-scroll-image"/>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts">
|
||
|
import {defineComponent, PropType, ref, Ref} from "vue";
|
||
|
|
||
|
export default defineComponent({
|
||
|
name: "VideoScrollImage",
|
||
|
props: {
|
||
|
definition: {
|
||
|
type: Object as PropType<VideoScrollImageDef>,
|
||
|
required: true
|
||
|
},
|
||
|
visible: {
|
||
|
type: Boolean,
|
||
|
required: true
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
visible() {
|
||
|
if (!this.img || !this.visible) {
|
||
|
return;
|
||
|
}
|
||
|
console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
|
||
|
this.currentSrc = this.definition.fullres;
|
||
|
const grayTimeout = setTimeout(() => {
|
||
|
this.img!.classList.add("visible");
|
||
|
this.img!.style.background = "grey";
|
||
|
}, 3000);
|
||
|
this.img.onload = () => {
|
||
|
clearTimeout(grayTimeout);
|
||
|
this.img!.classList.add("visible");
|
||
|
this.img!.style.background = "none";
|
||
|
// if (this.isHorizontal) {
|
||
|
// this.img!.style.height = "auto";
|
||
|
// } else {
|
||
|
// this.img!.style.width = "auto";
|
||
|
// }
|
||
|
};
|
||
|
}
|
||
|
},
|
||
|
setup(props) {
|
||
|
const img = ref<HTMLImageElement | null>(null);
|
||
|
const currentSrc: Ref<string | undefined> = ref(undefined);
|
||
|
|
||
|
return {
|
||
|
img,
|
||
|
currentSrc
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
|
||
|
export interface VideoScrollImageDef {
|
||
|
fullres: string
|
||
|
}
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
|
<style>
|
||
|
.video-scroll-image {
|
||
|
position: absolute;
|
||
|
image-rendering: optimizeSpeed;
|
||
|
opacity: 0;
|
||
|
transition: opacity .5s;
|
||
|
}
|
||
|
|
||
|
.video-scroll-image.visible {
|
||
|
opacity: 1 !important;
|
||
|
}
|
||
|
</style>
|