Added lazy loading attribute to thumbnail image tags to lazily load i…

…mages outside viewport.
learningequality · Nov 16, 2024 · c7ab0e7 · c7ab0e7
1 parent 53bd504
commit c7ab0e7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 18 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
@@ -1,5 +1,4 @@
 <template>
-
   <span class="channel-thumbnail">
     <!--
       we consider thumbnails decorative - empty `alt`
@@ -10,14 +9,12 @@
       class="image"
       :src="thumbnailUrl"
       alt=""
-    >
+      loading="lazy"
+    />
   </span>
-
 </template>
 
-
 <script>
-
   export default {
     name: 'ChannelThumbnail',
     props: {
@@ -28,12 +25,9 @@
       },
     },
   };
-
 </script>
 
-
 <style lang="scss" scoped>
-
   .channel-thumbnail {
     display: flex;
     flex-direction: column;
@@ -49,5 +43,4 @@
     height: auto;
     max-height: 100%;
   }
-
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/Thumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/Thumbnail.vue
@@ -1,5 +1,4 @@
 <template>
-
   <span
     class="thumbnail"
     :style="thumbnailStyles"
@@ -17,15 +16,13 @@
       class="image"
       :src="thumbnailUrl"
       alt=""
-    >
+      loading="lazy"
+    />
     <slot name="labels"></slot>
   </span>
-
 </template>
 
-
 <script>
-
   /**
    * Displays a thumbnail in 16:9 ratio. A thumbnail image with
    * a different aspect ratio will be letterboxed to fit 16:9.
@@ -61,12 +58,9 @@
       },
     },
   };
-
 </script>
 
-
 <style lang="scss" scoped>
-
   /*
   16:9 aspect ratio with letterboxing (9 / 16 = 0.5625 = 56.25%)
   https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
@@ -105,5 +99,4 @@
       opacity: 0.3;
     }
   }
-
 </style>