From 6670f43b11ed80af26449bf9cb29453fda0c42c4 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 11 Oct 2020 17:43:56 +0200
Subject: [PATCH] Implements intersectObserver to lazy load images.

IntersectionObserver for delaying the load of images until the component
enteres the viewport.
---
 src/ui/Wine.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue
index 88574e8..971acfe 100644
--- a/src/ui/Wine.vue
+++ b/src/ui/Wine.vue
@@ -2,7 +2,7 @@
   <div class="wine">
     <div class="wine-image">
       <img
-        v-if="wine.image"
+        v-if="wine.image && loadImage"
         :src="wine.image"
       />
       <img v-else class="wine-placeholder" alt="Wine image" />
@@ -32,6 +32,29 @@ export default {
       type: Object,
       required: true
     }
+  },
+  data() {
+    return {
+      loadImage: false
+    }
+  },
+  methods: {
+    setImage(entries) {
+      const { target, isIntersecting } = entries[0];
+      if (!isIntersecting) return;
+
+      this.loadImage = true;
+      this.observer.unobserve(target);
+    }
+  },
+  created() {
+    this.observer = new IntersectionObserver(this.setImage, {
+      root: this.$el,
+      threshold: 0
+    })
+  },
+  mounted() {
+    this.observer.observe(this.$el);
   }
 };
 </script>