From 7cf5d488e56e10adc29191cb15515876ce7f54c7 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sun, 27 Dec 2020 10:53:40 -0600
Subject: [PATCH] Lazy load card images

---
 components/video/card.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/video/card.vue b/components/video/card.vue
index e0484b3..c2fcdc6 100644
--- a/components/video/card.vue
+++ b/components/video/card.vue
@@ -8,13 +8,18 @@
             <div class="video-card-container relative overflow-hidden bg-black">
                 <div class="video-card-image ratio-wrapper">
                     <div class="relative overflow-hidden w-full pb-16/9">
-                        <img
-                            :srcset="thumbnailSrcset"
-                            :sizes="thumbnailSizes"
-                            :src="video.thumbnails.default.url"
-                            :alt="video.name"
-                            class="absolute h-full w-full object-cover"
-                        >
+                        <picture>
+                            <source
+                                :sizes="thumbnailSizes"
+                                :data-srcset="thumbnailSrcset"
+                                type="image/jpg"
+                            >
+                            <img
+                                :data-src="video.thumbnails.default.url"
+                                :alt="video.name"
+                                class="lazyload absolute h-full w-full object-cover"
+                            >
+                        </picture>
                     </div>
                 </div>
                 <div
@@ -57,6 +62,8 @@
 
 <script>
 
+import 'lazysizes'
+
 // import { getVideoEndpoint } from '~/helpers/app-derived.js'
 
 export default {