Frames

template created

0
1
2
3
1<template>
2 <transition name="lazy-image">
3 <img :key="srcImage" :src="srcImage" :alt="alt" :class="classNames" :title="title" />
4 </transition>
5</template>
6
7<script>
8export default {
9 name: "LazyImage",
10 props: {
11 src: {
12 type: String,
13 required: true
14 },
15 alt: {
16 type: String,
17 required: true
18 },
19 classNames: {
20 type: Array,
21 default: null
22 },
23 title: {
24 type: String,
25 default: null
26 }
27 },
28 data() {
29 return {
30 observer: null,
31 intersected: false
32 };
33 },
34 computed: {
35 srcImage() {
36 return this.intersected
37 ? this.src
38 : "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
39 }
40 },
41 mounted() {
42 this.observer = new IntersectionObserver(entries => {
43 const image = entries[0];
44 if (image.isIntersecting) {
45 this.intersected = true;
46 this.observer.disconnect();
47 }
48 });
49
50 this.observer.observe(this.$el);
51 },
52 destroyed() {
53 this.observer.disconnect();
54 }
55};
56</script>
57
58<style lang="scss" scoped>
59.lazy-image-enter-active,
60.lazy-image-leave-active {
61 transition: opacity 0.4s;
62}
63.lazy-image-enter,
64.lazy-image-leave-to {
65 opacity: 0;
66}
67</style>